CSS3 クリックボタン円形進行ティック効果実装コード

8. CSS3 クリックボタンの円形進捗チェック効果

8.1 画像プレビュー

ここに画像の説明を挿入

8.2 index.html コード

<!DOCTYPE html>
<html lang="ja">
	<ヘッド>
		<メタ文字セット="UTF-8">
		<title>CSS3 クリック ボタンの円形進行状況ティック効果</title>
		<!--アイコンライブラリ-->
		<link rel='スタイルシート' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>
		<!--コアスタイル-->
		<link rel="スタイルシート" href="css/style.css">
	</head>
	<本文>
		<div class="背景">
			<input type="チェックボックス" id="ボタン">
			<label for="button" class="button"> ボタンをクリックしてください<i class="fas fa-check"></i></label>
			<svg クラス="circle">
				<円 cx="32" cy="32" r="31">
			</svg>
		</div>
	</本文>
</html>

8.3 style.css コード

体 {
	マージン: 0;
	高さ：100vh;
	幅：100vw;
	ディスプレイ: フレックス;
	アイテムの位置を中央揃えにします。
	コンテンツの中央揃え: 中央;
	フォントファミリー: "Lucida Sans Unicode"、"Lucida Grande"、サンセリフ;
	フォントサイズ: 14px;
}

。背景 {
	位置: 相対的;
	背景: linear-gradient(上へ、#49b26e 0%、#57d895 100%);
	境界線の半径: 5px;
	ディスプレイ: フレックス;
	アイテムの位置を中央揃えにします。
	コンテンツの中央揃え: 中央;
	flex-direction: 列;
	ボックスの影: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
	幅: 400ピクセル;
	高さ: 400px;
	色: 白;
}

.background 入力 {
	表示: なし;
}

.background .button {
	ディスプレイ: フレックス;
	コンテンツの中央揃え: 中央;
	アイテムの位置を中央揃えにします。
	幅: 260ピクセル;
	高さ: 60px;
	境界線: 2px の白実線;
	境界線の半径: 30px;
	テキスト配置: 中央;
	フォントサイズ: 20px;
	テキスト変換:大文字;
	フォントの太さ: 太字;
	文字間隔: 2px;
	遷移: すべて 0.3 秒のイーズイン アウト。
	カーソル: ポインタ;
}

.background .button:hover {
	背景色: #37be77;
}

.background .button .fas {
	位置: 絶対;
	色: #4caf50;
	zインデックス: 2;
	不透明度: 0;
}

.背景 .円 {
	位置: 絶対;
	幅: 65px;
	高さ: 65px;
	塗りつぶし: なし;
	ストローク：白;
	ストローク幅: 2px;
	ストロークの線のサイズ: 丸い;
	ストロークダッシュ配列: 183 183;
	ストロークダッシュオフセット: 183;
	不透明度: 0;
	左: 0;
	下部: 0;
	右: 0;
	上: 0;
	マージン: 自動;
	ポインタイベント: なし;
	変換: 回転(-90度);
}

.background input:checked~.button {
	アニメーション: ボタン 0.5 秒、両方を緩和、フィル 0.5 秒、イーズアウト 1.5 秒前進。
}

.background input:checked~.button .fas {
	アニメーション: チェック 0.5 秒、イーズアウト 1.5 秒、両方;
}

.background 入力:チェック済み~.circle {
	アニメーション: 2 秒の円、両方でのイーズアウト 0.5 秒。
}

@keyframes ボタン {
	0% {
		幅: 260ピクセル;
		左: 70px;
		境界線の色: 白;
		色: 白;
	}

	50% {
		色: 透明;
	}

	100% {
		幅: 60ピクセル;
		左: 170px;
		境界線の色: #45b078;
		背景: 透明;
		色: 透明;
	}
}

@keyframes 円 {
	0% {
		ストロークダッシュオフセット: 183;
	}

	50% {
		ストロークダッシュオフセット: 0;
		ストロークダッシュ配列: 183;
		変換: 回転(-90度) スケール(1);
		不透明度: 1;
	}

	90%、
	100% {
		ストロークダッシュ配列: 500 500;
		変換: 回転(-90度) スケール(2);
		不透明度: 0;
	}
}

@keyframes 塗りつぶし {
	0% {
		背景: 透明;
		境界線の色: 白;
	}

	100% {
		背景: 白;
	}
}

@keyframes チェック {
	0% {
		不透明度: 0;
	}

	100% {
		不透明度: 1;
	}
}

CSS3 クリックボタンの円形プログレスティック効果に関するこの記事はこれで終わりです。CSS3 円形プログレスボタンの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: IE6のmin-widthとmin-heightと互換性を持たせる簡単な方法

>>: Linux システム構成 (サービス制御) の詳細な紹介