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の分析