カテゴリ:デジタル覚え書き > web関係 »

【CSS】アニメーションボーダー

左上からぐるっと囲むアニメーションをボーダーに設定してみます。 出来上がりはこんな感じ。
マウスオーバーしてみてください


html

マウスオーバーしてみてください
css

div {
	width: 300px;
	height: 50px;
	position: relative;
	--total-ms: 1200ms; /*アニメーションが完了するまでの時間*/
	--partial-ms: calc(var(--total-ms) / 4); /*線1本にかける時間*/
}
div::before, div::after {
	background-color: #000000;
	content: "";
	display: block;
	position: absolute;
	transition: all var(--partial-ms) ease;
	width: 0px;
	height: 0px;
}
.outer::before { /*左上から右へ*/
	height: 1px;
	top: -1px;
	left: 0;
	transition-delay: calc(var(--partial-ms) * 3); /*帰りのディレイ*/
}
.outer::after { /*右上から下へ*/
	width: 1px;
	top: 0;
	right: -1px;
	transition-delay: calc(var(--partial-ms) * 2); /*帰りのディレイ*/
}
.inner::before { /*右下から左へ*/
	height: 1px;
	bottom: -1px;
	right: 0;
	transition-delay: var(--partial-ms); /*帰りのディレイ*/
}
.inner::after { /*左下から上へ*/
	width: 1px;
	bottom: 0;
	left: -1px;
	transition-delay: 0ms; /*帰りのディレイ*/
}
.outer:hover::before {
	width: calc(100% + 1px);
	transition-delay: 0ms; /*行きのディレイ*/
}
.outer:hover::after {
	height: calc(100% + 1px);
	transition-delay: var(--partial-ms); /*行きのディレイ*/
}
.inner:hover::before {
	width: calc(100% + 1px);
	transition-delay: calc(var(--partial-ms) * 2); /*行きのディレイ*/
}
.inner:hover::after {
	height: calc(100% + 1px);
	transition-delay: calc(var(--partial-ms) * 3); /*行きのディレイ*/
}
「ボーダー」とは書いたけど、bofore擬似要素とafter擬似要素の幅や高さを変えることでボーダーっぽく見せています。
結構書くこと多かった。
行きと帰りでディレイ(アニメーションが開始されるまでの遅延時間)が入れ替わるから……。


ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

コメントの投稿

非公開コメント

ステータス
細野ゆとり
あそびにん
せいべつおんな
レベル
ちから
すばやさ
こうげき力
しゅび力
EX
最新記事
カテゴリー
月別アーカイブ
全記事表示リンク

全ての記事を表示する

おえかき
ブログ内ページランキング
twitter
その他SNS
検索フォーム
オンラインカウンター
現在の閲覧者数:
カレンダー
01 | 2020/02 | 03
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
リンク
カウンター
RSSリンクの表示
QRコード
QR