CSS 読み込み効果の実装パックマン

えーっと、名前はただの推測です 2333

序文

これは練習用の CSS デモです。何か間違っている点があれば、ご指摘ください。偏見なく受け入れます。わーい

HTMLレイアウト

  <div class="コンテナ">
    <div class="読み込み中">
      <div class="食べる"></div>
      <div class="load"></div>
      <div class="load"></div>
      <div class="load"></div>
    </div>
  </div>

CSS スタイル

使用される主な効果はアニメーションであり、要素の角度位置を継続的に制御して、パックマンに似た読み込みデモを実現します。

    体 {
      マージン: 0;
      パディング: 0;
      背景: #fff;
    }
    。容器 {
      位置: 絶対;
      上位: 50%;
      左: 50%;
      変換: translate(-50%, -50%);
    }
    .読み込み中{
      位置: 相対的;
      幅: 200ピクセル;
      高さ: 50px;
      ディスプレイ: フレックス;
    }
    。食べる {
      位置: 相対的;
      幅: 50px;
      高さ: 50px;
      左: 0;
      色: #ff0000;
      アニメーション: eat-animate 2.4s easy-in-out infinite;
    }
    @keyframes 食べるアニメーション {
      100% {
        左: 150px;
      }
    }
    .eat::before {
      コンテンツ： '';
      位置: 絶対;
      幅: 0;
      高さ: 0;
      幅: 50px;
      高さ: 25px;
      上: 0;
      境界線の半径: 50px 50px 0 0;
      背景: 現在の色;
      変換: 回転(-30度);
      アニメーション: eat-top 2.4s easy-in-out infinite;
    }
    @keyframes 食べるトップ {
      20% {
        変換: 回転(-30度);
      }
      35% {
        変換: 回転(0度);
      }
      45% {
        変換: 回転(-30度);
      }
      60% {
        変換: 回転(0度);
      }
      70% {
        変換: 回転(-30度);
      }
      85% {
        変換: 回転(0度);
      }
      100% {
        変換: 回転(0度);
      }
    }
    .eat::after {
      コンテンツ： '';
      位置: 絶対;
      幅: 0;
      高さ: 0;
      幅: 50px;
      高さ: 25px;
      下部: 0;
      境界線の半径: 0 0 50px 50px;
      背景: 現在の色;
      変換: 回転(30度);
      アニメーション: eat-bottom 2.4s easy-in-out infinite;
    }
    @keyframes 食べるボトム {
      20% {
        変換: 回転(30度);
      }
      35% {
        変換: 回転(0度);
      }
      45% {
        変換: 回転(30度);
      }
      60% {
        変換: 回転(0度);
      }
      70% {
        変換: 回転(30度);
      }
      85% {
        変換: 回転(0度);
      }
      100% {
        変換: 回転(0度);
      }
    }
    。負荷 {
      位置: 相対的;
      幅:30px;
      高さ: 30px;
      マージン: 10px;
      色: #e47272;
      境界線の半径: 50%;
      背景: 現在の色;
    }
    .load:n番目の子(2) {
      アニメーション: load1 2.4s 線形無限;
      変換: スケール(1);
    }
    @キーフレームロード1 {
      35% {
        変換: スケール(0);
      }
      100% {
        変換: スケール(0);
      }
    }
    .load:n番目の子(3) {
      アニメーション: load2 2.4s 線形無限;
      変換: スケール(1);
    }
    @キーフレームロード2 {
      30% {
        変換: スケール(1);
      }
      58%
        変換: スケール(0);
      }
      100% {
        変換: スケール(0);
      }
    }
    .load:n番目の子(4) {
      アニメーション: load3 2.4s 線形無限;
      変換: スケール(1);
    }
    @キーフレームロード3 {
      60% {
        変換: スケール(1);
      }
      80% {
        変換: スケール(0);
      }
      100% {
        変換: スケール(0);
      }
    }

プレビュー