CSS3 円形プログレスバーアニメーション効果
本文{背景色: #fff}
@-webkit-keyframes ロード {
0% {
ストロークダッシュオフセット: 0;
}
}
@keyframes ロード {
0% {
ストロークダッシュオフセット: 0;
}
}
。進捗 {＃＃＃ 位置: 相対;
表示: インラインブロック;
パディング: 0;
テキスト整列: 中央;
}
.進捗状況>リ {
表示: インラインブロック;
位置: 相対;
テキスト整列: 中央;
色: #93A2AC;
フォントファミリー: Lato;
フォントの太さ: 100;
マージン: 2rem;
}
.進捗状況> li:{
より前 内容: attr(データ名);
位置: 絶対;
幅: 100%;
下: -2rem;
フォントの太さ: 400;
}
.進捗状況> li:{
の後 コンテンツ: attr(データパーセント);
位置: 絶対;
幅: 100%;
上: 3.7レム;
左: 0;
フォントサイズ: 2rem;
テキスト整列: 中央;
}
.progress svg {
幅: 10レム;
高さ: 10レム;
}
.progress svg:nth-child(2) {
位置: 絶対;
左: 0;
上: 0;
-webkit-transform: 回転(-90度);
変換: 回転(-90度);
}
.progress svg:nth-child(2) パス {
塗りつぶし: なし;
ストローク幅: 25;
ストローク-ダシャーレー: 629;
ストローク: #fff;
不透明度: .9;
-webkit-animation: ロード 10 秒;
アニメーション: 10 秒をロードします;
}
</style>
このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロード サイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn
関連記事
CSS を使用して特定のボタンのマウス ホバー効果を無効にするにはどうすればよいですか?
27 Nov 2024
特定のボタンのマウス ホバー効果を無効にする CSSAiming を使用して、Web ページ内の特定のボタンのマウス ホバー効果を無効にすると、...
ストリップタグ以外の HTML 特殊文字コードを効果的に削除するにはどうすればよいですか?
18 Oct 2024
効果的な HTML 特殊文字の削除:strip_tags を超えた拡張strip_tags は HTML タグを効果的に削除しますが、HTML 特殊文字コードが残る可能性があります。 「 」や「©」などのコードは、RSS フィード ファイルの保存を中断する可能性があります。
Visual Studio C コードで特定の警告行を無効にするにはどうすればよいですか?
28 Nov 2024
Visual Studio で特定の警告行を無効にする Visual Studio で、ハンドルされない例外やその他の特定のコンパイル エラーが発生した場合、...
古いブラウザでも CSS を使用して背景のぼかし効果を作成する方法
28 Oct 2024
CSS: Backdrop-Filter 要素の背景にぼかしやその他の効果を有効にする CSS 機能である PolyfillBackdrop-filter は、ほとんど残っています...
CSS を使用して特定のボタンのホバー効果を無効にするにはどうすればよいですか?
23 Nov 2024
CSS クラスを使用して特定のボタンのホバー効果を無効にする...を使用して、特定のボタンのマウス ホバー効果を無効にするメソッドが必要です。
テンプレート関数メンバーの部分特殊化により「不完全な型の無効な使用」が発生するのはなぜですか?
03 Dec 2024
部分的なテンプレート特殊化での「不完全な型の無効な使用」エラーテンプレート関数の部分的な特殊化を作成しようとすると...
CSS を使用して特定のボタンのホバー効果を無効にするにはどうすればよいですか?
16 Dec 2024
CSS クラスを使用して特定のボタンのホバー効果を無効にする無効にした状態を維持しながら、特定のボタンのマウス ホバー効果を無効にするには...
正規表現で Go 文字列をエスケープするにはどうすればよいですか?
23 Nov 2024
正規表現で Go 文字列をエスケープするピリオド、ダッシュ、その他の一意の要素などの特殊文字を含む文字列との一致は次のようになります。
メンバー関数の部分的なテンプレート特殊化により、C で「不完全な型の無効な使用」エラーが発生するのはなぜですか?
02 Dec 2024
部分的なテンプレートの特殊化と「不完全な型の無効な使用」エラー C では、部分的なテンプレートの特殊化により、次のカスタマイズが可能になります。
ホットツール Tags
Hot Tools
jQuery+Html5で美しい告白アニメーションコードを実現
jQuery + Html5 は美しい告白アニメーション コードを実装しており、アニメーション効果は素晴らしく、プログラマーの告白には必須です。
カップルのロマンチックな告白 js特撮コード
カップルのロマンチックな告白用の JS 特殊効果コードです。このような特殊効果は、結婚式の写真のウェブサイトで使用したり、個人のウェブサイトに配置したりできます。また、優れた特殊効果です。PHP 中国語 Web サイトのダウンロードを推奨します。
シンプルなJS愛の告白アーティファクト
シンプルなネイティブ JS 愛の告白アーティファクト
BunkerのHTML5パーティクルアニメーション表現効果
Bunker の HTML5 パーティクル アニメーション表現特殊効果コード。アニメーション特殊効果テキストはコード内で変更でき、テキスト入力をカスタマイズできるページを作成できます。非常に人気があるはずです。この HTML5 特殊効果は非常に美しいです。
jQuery レスポンシブ バックグラウンド ログイン インターフェイス テンプレート
jQuery レスポンシブ バックエンド ログイン インターフェイス テンプレート HTML ソース コード. ログイン ページは jQuery を使用してフォームを検証し、ユーザー名とパスワードが要件を満たしているかどうかを判断します. 通常、ログイン ページは企業 Web サイトまたはモール Web サイトで使用する必要があるページです. レスポンシブ バックエンドページ、ブラウザが拡大または縮小すると、ブラウザに応じて背景の画像のサイズが変更されます。 PHP中国語サイトはダウンロードをオススメします！