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 データベースのバックアップをスケジュールするいくつかの方法 (包括的)
![2012年のベストWebデザイン作品レビュー[パート1]](/upload/images/67cac32417684.webp)
推薦する
ウェブサイトのパフォーマンスを向上させるためのコンテンツ関連の10の原則
<br />英語アドレス: http://developer.yahoo.com/per...
ウェブページでメモの詳細が灰色になる問題に対処する
1. IE では、相対的な配置、つまり <div style="background...
MySQL 学習のまとめ: InnoDB ストレージ エンジンのアーキテクチャ設計の予備的な理解
1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...
Linux の運用と保守で netstat の代わりに ss コマンドを使用する方法
序文Linux サーバーを操作および管理するときに、最もよく使用されるコマンドの 1 つが nets...
HTMLの基礎を詳しく解説（第2部）
1. リストリスト ulコンテナーには、一貫した構造とスタイルを持つテキストまたはグラフの形式が読...
ロンボク実装 JSR-269
序文導入Lombok は、Google Guava と同様に便利なツールであり、強くお勧めします。す...
要素 el-table テーブルの二次カプセル化 (テーブルの高さの調整付き)
序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...
Vue-cliに基づくコードセットは複数のプロジェクトをサポートします
目次アプリケーションシナリオアイデアプロジェクト構造全体的なプロジェクト構造webpack パッケー...
Saltstack に Zabbix サービスをデプロイする方法を説明します
目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...
CSSは親コンテナのdivをimg画像で埋め、コンテナのサイズに適応します。
ページに複数の画像を導入すると、画像のサイズがばらつくことがあります。しかし、それらを一貫したサイズ...
HTMLはマウスをホバーしたときにテキストを表示するためにtitle属性を使用します。
コードをコピーコードは次のとおりです。 <a href=# title="ここに表示...
Linux での MongoDB のインストールと設定のチュートリアル
MongoDBインストールYumを使用してインストールすることを選択する1. repoファイルを作成...
Vueは複数の画像の追加、表示、削除を実装します
この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...
JavaScript で同時実行制御を実装する方法
目次1. 同時実行制御の概要1.1 フェーズ1 1.2 フェーズ2 1.3 フェーズ3 2. 同時実...
Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策
Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...