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 データベースのバックアップをスケジュールするいくつかの方法 (包括的)
推薦する
Vueはシンプルな虫眼鏡効果を実装します
この記事では、参考までに、簡単な虫眼鏡効果を実現するためのVueの具体的なコードを紹介します。具体的...
Dockerがコンテナサービスを停止または削除できない問題の解決策
序文今日、開発者から、コンテナ サービスを停止、rm (docker rm -f)、または強制終了で...
Linux デュアル ネットワーク カード バインディング スクリプト メソッドの例
Linux の操作と構成作業では、デュアル ネットワーク カードのバインディングがよく使用されます。...
HTML フォームタグチュートリアル (3): 入力タグ
HTML フォーム タグのチュートリアル。このセクションでは、主に Web ページで INPUT タ...
ネイティブ js はフォームの定期的な検証を実装します (検証後にのみ送信)
以下の機能が実装されています。 1. ユーザー名: onfouc は msg ルールを表示します。o...
MySQL バッチ挿入ループの詳細なサンプルコード
背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...
Linux コマンドラインのワイルドカードとエスケープ文字の実装
ハードディスクのファイル属性のバッチ表示など、特定の種類のファイルに対してバッチ操作を実行する場合、...
Node.js http モジュールの使用
目次序文ウェブHTTP サーバーファイルサーバー練習する序文Node.js 開発の目的は、JavaS...
MYSQL開発パフォーマンス調査：バッチデータ挿入の最適化方法
1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...
Node.js の非同期ジェネレータと非同期反復の詳細な説明
序文ジェネレーター関数は、async/await が導入される前から JavaScript に存在し...
VMware 仮想マシン ubuntu18.04 インストール チュートリアル
インストール手順1. 仮想マシンを作成する 2. [カスタム（詳細）]を選択し、[次へ]をクリックし...
CSSをインポートする方法に関する詳細な洞察の要約
CSS の開発履歴についてはここでは紹介しません。ブログを書いている理由の 1 つは、フロントエンド...
JSはモバイル端末の画面を1つずつ上下にスライドさせる機能を実装します
この記事では、モバイル端末を一度に1画面ずつ上下にスライドさせるためのJSの具体的なコードを参考まで...
Vueは製品の拡大鏡効果を実現します
この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...
JSにおけるデータ型の正しい判定方法の例
目次序文typeof は型を正しく判別できますか? instanceof は型を正しく判別できますか...