純粋な 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 のテーブル ステートメントを作成する例

推薦する

HTML の基礎_一般的なタグ、共通タグ、表

パート 1 HTML <html> -- 開始タグ<ヘッド>ウェブページ上の...

nginxのリソースキャッシュ設定の詳細な説明

私はずっとキャッシュについて学びたいと思っていました。結局のところ、キャッシュはフロントエンドのパフ...

進捗バーのネイティブ JavaScript 実装

進捗バーを実装するためのJavaScriptの具体的なコードは参考までに。具体的な内容は次のとおりで...

Nginx でアクセス頻度、ダウンロード速度、同時接続数を制限する方法

1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...

Docker Compose を使用して Confluence を構築するチュートリアル

この記事は「Attribution 4.0 International (CC BY 4.0)」ライ...

CSSのtranslate(-50%,-50%)は水平および垂直の中央揃え効果を実現します。

translate(-50%,-50%) 属性:中央に配置するには、長さと幅の 50% だけ上と左...

Apache の一般的な仮想ホスト設定方法の分析

1. Apacheサーバーのインストールと設定yum インストール httpd -y systemc...

Vueカスタムディレクティブの詳細

目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...

ins タグと del タグの属性と使用法

insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...

MySQL 8.0.16 圧縮版のダウンロードと Win10 システムへのインストール チュートリアル

公式サイトからダウンロード: https://www.mysql.com MySQLの公式サイトにア...

VMware ESXi 5.5 の展開および構成図のプロセス

目次1. インストール要件2. OSイメージのダウンロード3. VMware Workstation...

HTML ユーザー登録ページ設定ソースコード

上記の Web ページをデザインします。 <!DOCTYPE html> <htm...

Windows で MySQL 5.7.17 圧縮バージョンをインストールするときに遭遇する落とし穴

まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...

ウェブページエクスペリエンス: 計画と設計

1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...

LinuxシステムでのSystemC環境設定方法

以下はcentos7での設定方法ですsystemc ソース パッケージをダウンロード: System...