CSS ハート型読み込みアニメーションのソースコードの実装

CSS ハート型読み込みアニメーションのソースコードの実装

さっそく、コードをお見せしましょう。コードは非常にシンプルなので、勉強すれば理解できるようになります。質問があれば、私に聞いてください。

<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">
    <タイトル></タイトル>
    <スタイル タイプ="text/css">
      .ハート読み込み{
        上マージン: 120px;
        幅: 200ピクセル;
        高さ: 200px;
      }

      ul {
        リストスタイル: なし;
        ディスプレイ: フレックス;
        コンテンツの両端揃え: スペースの間;
        幅: 150ピクセル;
        高さ: 10px;
        /* ハート型とストリップ型を作るアイデアは同じですが、各ストリップの高さが異なります */
      }
      li {
        --カウント: 9;
        --rgb: calc(var(--index) / var(--count) * .5turn);
        /* 遅延をあまり遅く設定しないでください。遅すぎるとハートの形が見えなくなります。遅延とアニメーションの継続時間を同時に調整してください。*/
        --time: calc((var(--index) - 1) * 150ms);
        境界線の半径: 5px;
        幅: 10px;
        高さ: 10px;
        背景色: #003BB3;
        /* フィルター機能を使用すると、色のグラデーションが非常に美しくなります */
        フィルター: hue-rotate(var(--rgb));
        /* 以下はアニメーションの継続時間です*/
        アニメーション期間: 2.5秒;
        アニメーション遅延: var(--time);
        アニメーションの反復回数: 無限;
      }
      .line-1,
      .line-9 {
        アニメーション名: 行移動 1;
      }
      .line-2,
      .line-8 {
        アニメーション名: ライン移動2;
      }
      .line-3、
      .line-7 {
        アニメーション名: 行移動 3;
      }
      .line-4、
      .line-6 ​​{
        アニメーション名: 行移動 4;
      }
      .line-5 {
        アニメーション名: 行移動 5;
      }
      /* 対称的なアニメーションは、ハートの形が見えるように同じ高さにする必要があります */
      @keyframes 行移動 1 {

        0%、
        10%、
        90%、
        100% {
          高さ: 10px;
        }

        45%、
        55% {
          高さ: 30px;
          変換: translate3d(0, -15px, 0);
        }
      }

      @keyframes 行移動 2 {

        0%、
        10%、
        90%、
        100% {
          高さ: 10px;
        }

        45%、
        55% {
          高さ: 60px;
          変換: translate3d(0, -30px, 0);
        }
      }

      @keyframes 行移動 3 {

        0%、
        10%、
        90%、
        100% {
          高さ: 10px;
        }

        45%、
        55% {
          高さ: 80px;
          変換: translate3d(0, -40px, 0);
        }
      }

      @keyframes 行移動 4 {

        0%、
        10%、
        90%、
        100% {
          高さ: 10px;
        }

        45%、
        55% {
          高さ: 90px;
          変換: translate3d(0, -30px, 0);
        }
      }

      @keyframes 行移動 5 {

        0%、
        10%、
        90%、
        100% {
          高さ: 10px;
        }

        45%、
        55% {
          高さ: 90px;
          変換: translate3d(0, -20px, 0);
        }
      }
    </スタイル>
  </head>
  <本文>
    <div class="heart-loading">
      <ul>
        <li class="line-1" style="--index: 1"></li>
        <li class="line-2" style="--index: 2"></li>
        <li class="line-3" style="--index: 3"></li>
        <li class="line-4" style="--index: 4"></li>
        <li class="line-5" style="--index: 5"></li>
        <li class="line-6" style="--index: 6"></li>
        <li class="line-7" style="--index: 7"></li>
        <li class="line-8" style="--index: 8"></li>
        <li class="line-9" style="--index: 9"></li>
      </ul>
    </div>
  </本文>
</html> 

CSS ハート型ローディングアニメーション ソースコードの実装に関するこの記事はこれで終わりです。CSS ハート型ローディングアニメーションの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  ウェブページ上でデスクトップ exe プログラムを呼び出す簡単な方法

>>:  ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

推薦する

js における浅いコピーと深いコピーの詳細な説明

目次1. jsメモリ2. 譲渡3. 浅いコピー4. ディープコピー序文:以下の記事を読む前に、記憶に...

mysql5.6.zip形式の圧縮版インストールグラフィックチュートリアル

はじめに: MySQL は、スウェーデンの MySQL AB によって開発されたリレーショナル デー...

MySQLデータベースのマスタースレーブ同期構成と読み取り書き込み分離

MySQL マスター スレーブ レプリケーションを使用する利点は次のとおりです。 1. 安定性を向上...

MySQL準備原理の詳細な説明

準備のメリットPrepare SQL が生成される理由。まず、MySQL サーバー上で SQL を実...

nginx keepaliveの具体的な使い方

http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...

Docker で Springboot プロジェクトを実行する実装

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

スライダーを作成するためのネイティブ js ドラッグ アンド ドロップ機能のサンプル コード

ドラッグ アンド ドロップはフロントエンドでよく使われる機能であり、多くのエフェクトで js のドラ...

MySQL インデックスのカーディナリティの概念と使用例

この記事では、例を使用して、MySQL インデックス カーディナリティの概念と使用方法を説明します。...

一般的でない js 演算演算子の概要

目次2. カンマ演算子3. JavaScript Null 結合演算子 (??) 4. JavaSc...

Webフロントエンドツール、Sublime Text 2の紹介

Sublime Text 2 は、軽量でシンプル、効率的なクロスプラットフォーム エディターです。ブ...

MySQL のバックアップとリカバリの設計アイデア

背景まず、背景を説明します。ある制約により、当社の現在のバックアップ戦略では、1 日おきにフル バッ...

MySQL ページング制限の実用的な最適化

序文クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要があり...

JavaScript の非同期処理で待機時間を節約できますか?

JavaScriptで非同期実行の結果を同期的に取得するには、 for ループ内でawaitを使用...

RPM パッケージを使用して MySQL 5.7.18 をインストールするチュートリアル

システム:セントOS7 RPM パッケージ: mysql-コミュニティクライアント-5.7.18-1...

HarborをベースにしたDocker専用倉庫の構築方法

目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...