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 データベースのバックアップをスケジュールするいくつかの方法 (包括的)
推薦する
60件のページング事例と優れた実践例を推奨
<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...
Linux でタスク用のカスタム システム トレイ インジケーターを作成する
システム トレイ アイコンは、今日でも魔法のような機能です。アイコンを右クリックして目的のアクション...
Vue Elementのテーブルコンポーネントをカプセル化する方法
Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...
MySql マスタースレーブレプリケーションの実装原理と構成
データベースの読み取りと書き込みの分離は、トラフィック量の多い大規模システムやインターネット アプリ...
js の通常形式の日付と時刻に 0 を自動的に追加する 2 つのソリューション
目次背景解決策1アイデア:コード：解決策2アイデア:要約する参照する背景日付と時間をフォーマットする...
vue3+vite プロジェクトで svg を使用する方法の詳細なグラフィック説明
今日、vue3+viteプロジェクトの実践で、svgを使用する場合、以前の記述方法が使用できないこと...
シンプルなドラッグ効果を実現するJavaScript
この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
Linux Autofs 自動マウント サービスのインストールと展開のチュートリアル
目次1. autofs サービスの紹介2. Autofsのインストールと展開3. Autofs効果の...
MySQL が外部キーを作成できない理由と解決策
2 つのテーブルを関連付けるときに、外部キーを作成できませんでした。このブログから、問題は、ポイント...
MySQLにおけるトランザクションの永続性実装原理の詳細な説明
序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...
背景とリンクとして画像を書き込む方法（背景画像＋リンク）
写真を背景にしてリンクを記載します。たとえば、ウェブサイトのロゴ画像などです。例: ポテトのロゴ画像...
Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス
1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...
DockerでMySQLコンテナを作成する簡単な手順
序文すでに Docker をインストールしており、Docker について簡単に理解しています。ここで...
$remote_addr に基づく nginx フロントエンド配布方法の詳細な説明
要件は次のとおりです。ドメイン名の下に複数のサーバーがあります。現在、特定の地域をテストしています。...
CSS3 を使用して円形スクロール プログレス バー アニメーションを作成する例
テーマ今日は、CSS3 を使用して円形スクロール プログレス バー アニメーションを作成する方法を説...