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 のテーブルリターンとインデックスカバレッジの例の詳細な説明
目次インデックスタイプインデックス構造非クラスター化インデックスクエリインデックスカバー要約するイン...
Windows 2008 Server サブドメインを親ドメインに追加すると、ドメインが既に存在するというエラー メッセージが表示されます。
Windows 2008 Serverのサブドメインを親ドメインに参加させると、「ドメインは既に存...
srcまたはcss背景画像のurl値はbase64でエンコードされたコードです
ウェブ上の一部の画像の src または CSS 背景画像 URL の後に、data:image/pn...
Vue.set() と this.$set() の使い方と違い
開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...
Node.JS で悪天候のリアルタイム警報システムを構築する
目次序文：ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...
大規模なウェブサイトアーキテクチャを設計・構築する際に考慮すべき10の課題
ここでは、PHP、JSP、または .NET 環境については説明しません。アーキテクチャの観点から問題...
MySQLレジストリをクリアする方法
具体的な方法： 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...
CSS の子要素の Z インデックスと親要素の兄弟ノードの階層問題を解決する
1. 問題の出現フラット リストを作成しました。リストの一部には、マウスをホバーすると表示されるポッ...
iframe に関するいくつかの発見と考察
この物語は、今日の予期せぬ発見から始まります。同社には複数のウェブサイトがある。友達リンクにはお互い...
mysql maxとwhere間の実行問題の概要
mysql maxとwhereの間の実行の問題SQLを実行します: テーブル「grades」を作成し...
HTML埋め込みタグの使用方法と属性の詳細な説明
1. 基本的な文法コードをコピーコードは次のとおりです。埋め込み src=url注: 埋め込みはさま...
ヘッダーのチェックボックスをテキスト実装コードに変更するための選択テーブルを持つ要素
方法1: テーブル属性を使用する: header-cell-class-name テーブルインターフ...
HTMLで下線を設定するには？HTMLでテキストに下線を付ける方法
HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...
Tomcat で server.xml と content.xml を変更した後の自動復元の問題の解決方法
設定ファイルを server.xml と content.xml に書き込みます。サーバーを再起動す...
MySQL SQL ステートメントが遅い場合の一般的な原因と解決策
1. インデックス不足または無効なインデックスによるクエリの遅延数千万件のデータを含むテーブルで、イ...