純粋な CSS を使用して脈動するローダー効果のソースコードを作成する

純粋な CSS を使用して脈動するローダー効果のソースコードを作成する

効果プレビュー

右側の「クリックしてプレビュー」ボタンを押すと現在のページでプレビューが表示され、リンクをクリックすると全画面でプレビューされます。

https://codepen.io/comehop​​e/pen/wYvGwr

インタラクティブビデオ

このビデオはインタラクティブなので、いつでもビデオを一時停止して、ビデオ内のコードを編集できます。

Chrome、Safari、Edgeで開いて視聴してください。

https://scrimba.com/p/pEgDAM/cnMgQTr

ソースコードのダウンロード

Daily Front-end Practice Series の完全なソース コードを GitHub からダウンロードしてください。

https://github.com/comehop​​e/front-end-daily-challenges

コード解釈

DOM を定義すると、コンテナーには 10 個の子要素が含まれます。

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

センターディスプレイ:

体 {
    マージン: 0;
    高さ:100vh;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
    背景: 線形グラデーション(#eee 70%、ピンク);
}

コンテナ スタイルを、ピンクの背景と線の付いた円に設定します。

.ローダー{
    幅: 6em;
    高さ: 6em;
    パディング: 3em;
    フォントサイズ: 10px;
    背景色: ピンク;
    境界線の半径: 50%;
    境界線: 0.8em のホットピンク単色;
}

子要素のレイアウトを水平タイルに設定します。

.ローダー{
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの両端揃え: スペースの間;
}

子要素のスタイルを設定するには:

.loader > スパン {
    幅: 0.5em;
    高さ: 50%;
    背景色: ディープピンク;
}

子要素にアニメーション効果を追加します。

.loader > スパン {
    変換: スケールY(0.05) 移動X(-0.5em);
    アニメーション: span-animate 1.5 秒 無限イーズインアウト;
}
@keyframes span-animate {
    0%、100% {
        変換: スケールY(0.05) 移動X(-0.5em);
    }
    15% {
        変換: スケールY(1.2) 移動X(1em);
    }
    90%、100% {
        背景色: ホットピンク;
    }
}

サブ要素のインデックスを設定して、サブ要素がアニメーションを順番に再生できるようにします。

.loader > スパン {
    アニメーション遅延: calc(var(--n) * 0.05s);
}
.loader > span:nth-child(1) { --n: 1; }
.loader > span:nth-child(2) { --n: 2; }
.loader > span:nth-child(3) { --n: 3; }
.loader > span:nth-child(4) { --n: 4; }
.loader > span:nth-child(5) { --n: 5; }
.loader > span:nth-child(6) { --n: 6; }
.loader > span:nth-child(7) { --n: 7; }
.loader > span:nth-child(8) { --n: 8; }
.loader > span:nth-child(9) { --n: 9; }
.loader > span:nth-child(10) { --n: 10; }

コンテナアニメーションを追加して脈動効果を強化します。

.ローダー{
    アニメーション: loader-animate 1.5s 無限の easy-in-out;
}
@keyframes ローダーアニメーション {
    45%、55% {
        変換: スケール(1.05);
    }
}

要約する

上記は、エディターが紹介した純粋な CSS を使用して脈動するローダー効果を作成するソースコードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  nginx を介してローカルでリバースプロキシを構成するプロセス全体

>>:  Oracle の MySQL バージョンでユーザー Scott のテーブル ステートメントを作成する例

推薦する

Reactでのこのリファレンスの詳細な説明

目次原因:以下を実行します: 1. コンストラクター2.レンダリング機能3.bind関数とarrow...

js と jQuery での Ajax の使用例の詳細

目次ネイティブJS GETリクエストの送信方法投稿リクエストの送信方法パラメータ付きのGETリクエス...

MySQLでテーブルを接続するいくつかの方法

MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...

Win7 で IIS7 Web および FTP サービスを完全にアンインストールする方法

昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...

Web デザイナーにはどのような知識体系が必要ですか?

製品設計者は、複雑で大規模な製造システムと多様な市場に直面しているため、知識体系には幅広さと深さの両...

この記事ではSQL CASE WHENの使い方を詳しく説明します

目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...

インデックスを使用して数千万のデータを持つ MySQL のクエリ速度を最適化する

1. インデックスの役割一般的に言えば、インデックスは本の目次に相当します。条件に基づいてクエリを実...

Vue3.0 + TypeScript + Vite初体験の詳しい説明

目次プロジェクトの作成プロジェクト構造メイン.jsアプリ.vue:設定コンポジションAPI参照反応的...

WeChatアプレットがログインインターフェースを実装

WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...

Vue テンプレート構成と Webstorm コード形式仕様設定

目次1. コンパイラコードフォーマット仕様設定2. Vueテンプレートの設定1. コンパイラコードフ...

Web デザイン リファレンス Firefox デフォルト スタイル

W3C は HTML の標準をいくつか確立していますが、ブラウザは独自の定義済みスタイルに従って W...

3つの簡単な例を使ってハイパーリンクの下線を削除する方法

ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...

Docker基盤技術の適用に関する詳細な説明 名前空間Cgroup

Docker の基盤技術: Docker の基盤となる 2 つのコア テクノロジーは、名前空間とコ...

MySQL に絵文字表現を挿入できない問題の解決方法

序文最近この問題に遭遇するまで、私は UTF-8 が文字セットの問題に対する普遍的な解決策だと考えて...

MySQL で union all を使用してユニオンソートを取得する方法

プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...