CSS 動的読み込みバー効果のサンプルコード
|
CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>CSS 動的読み込みバーを表示する</title>
<スタイル>
/* CSS 変数の使用 */
.flex {
ディスプレイ: フレックス;
リストスタイル: なし;
/* li要素を水平に配置するように設定します */
}
.読み込み中{
幅: 200ピクセル;
高さ: 200px;
}
.loading>li {
/* li 要素の各インライン要素に CSS 変数を定義します -- line-index のサイズは異なります */
/* このとき、アニメーション遅延変数（計算後の時間 calc）を設定します */
--time: calc((var(--line-index) - 1) * 200ms);
境界線の半径: 3px;
幅: 6px;
高さ: 30px;
背景色: #f66;
/* アニメーションはすべて同じですが、開始時間が異なるため、この効果が発生します */
アニメーション: beat 1.5s easy-in-out var(--time) infinite;
}
.loading>li+li {
左マージン: 5px;
}
@keyframes ビート {
0%、
100% {
変換: scaleY(1);
}
50% {
変換: scaleY(.5);
}
}
</スタイル>
</head>
<本文>
<ul class="flexをロード中">
<li style="--line-index: 1;"></li>
<li style="--line-index: 2;"></li>
<li style="--line-index: 3;"></li>
<li style="--line-index: 4;"></li>
<li style="--line-index: 5;"></li>
<li style="--line-index: 6;"></li>
</ul>
</本文>
</html>効果を見る
CSS ダイナミック ローディング バーのソース コードに関するこの記事はこれで終わりです。CSS ダイナミック ローディング バーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: MySQL データベースのバックアップをスケジュールするいくつかの方法 (包括的)
推薦する
MySQL 5.5 の導入に関する問題
MySQL の導入現在、会社ではプラットフォーム運用を通じてMySQLを導入しています。金曜日、プラ...
VMware 仮想マシン ブリッジ モードでインターネットにアクセスできない問題を解決する方法
ステップ1: ローカルイーサネットプロパティをチェックして、VMwareブリッジプロトコルがインスト...
Vueはシンプルな虫眼鏡効果を実装します
この記事では、参考までに、簡単な虫眼鏡効果を実現するためのVueの具体的なコードを紹介します。具体的...
gorm で MySql データベースを操作する方法
1. テーブル内のフィールドの大文字と小文字の区別を設定するgorm クエリを使用する場合、MySQ...
Linux インストール MongoDB の起動と一般的な問題の解決
MongoDB のインストール プロセスと問題記録1. MongoDBのインストールMongoDBを...
innodb_autoinc_lock_mode の表現と値の選択方法についての簡単な説明
前提条件: Percona 5.6 バージョン、トランザクション分離レベルは RR mysql>...
スタックメニューを実装するためのjQueryプラグイン
jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...
Dockerデーモンのセキュリティ設定項目の詳細な説明
目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...
HTML 特殊文字エンコーディング CSS3 コンテンツに関する簡単な説明:「私は特別なシンボルです」
プロジェクトで使用されている特殊文字とアイコンHTMLコードXML/HTML コードコンテンツをクリ...
ネイティブJSで様々なモーションの複合モーションを実現
この記事では、ネイティブ JS で実装された複合モーションを紹介します。複合モーションとは、異なる属...
Webデザイン講座（4）：素材と表現について
<br />前回のWebデザインチュートリアル：Webデザインチュートリアル（3）：デザ...
JS WebSocketを使用して簡単なチャットを実装する方法
目次ショートポーリングロングポーリングウェブソケットコミュニケーションの原則シンプルな1対1チャット...
MySQLのワークベンチ例の詳細な説明
MySQL Workbench - モデリングおよび設計ツール1. モデルは、最も効果的で高性能なデ...
CSS3 アニメーション – ステップ機能の説明
最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...
seata docker 高可用性デプロイメントの詳細な紹介
バージョン1.4.2公式ドキュメントドッカーハブ起動する環境変数SEATA_CONFIG_NAMEを...