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

効果プレビュー

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

https://codepen.io/comehope/pen/wYvGwr

インタラクティブビデオ

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

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

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

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

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

https://github.com/comehope/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 のテーブルステートメントを作成する例