CSS で美しい時計アニメーション効果を実装するためのサンプルコード

変換: rotate(calc(30deg * var(--i)));
        変換の原点: 0 250px;
        アニメーション: 5 秒間、直線的に無限回転します。
        アニメーション遅延: calc(0.42s * var(--i));

<div class="box">
            <div class="color" style="--i:1">1</div>
            <div class="color" style="--i:2">2</div>
            <div class="color" style="--i:3">3</div>
            <div class="color" style="--i:4"​​>4</div>
            <div class="color" style="--i:5">5</div>
            <div class="color" style="--i:6">6</div>
            <div class="color" style="--i:7">7</div>
            <div class="color" style="--i:8">8</div>
            <div class="color" style="--i:9">9</div>
            <div class="color" style="--i:10">10</div>
            <div class="color" style="--i:11">11</div>
            <div class="color" style="--i:12">12</div>
            <div class="時間"></div>
            <div class="mintues"></div>
        </div>

* {
  マージン: 0px;
  パディング: 0px;
  ボックスのサイズ: 境界線ボックス;
}

体 {
  背景: -webkit-linear-gradient(左上、ピンク、rgb(90, 83, 83));
  ディスプレイ: フレックス;
  最小高さ: 100vh;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。

  セクション {
    高さ: 500px;
    幅: 500ピクセル;
    。箱 {
      位置: 相対的;
      高さ: 500px;
      幅: 500ピクセル;
      ディスプレイ: フレックス;
      コンテンツの中央揃え: 中央;
      アイテムの位置を中央揃えにします。
      境界線: 5px 実線 #e2adb6;
      境界線の半径: 50%;
      // 境界線: 2px 実線の赤;
      &:hover .color {
        アニメーション再生状態: 一時停止;
      }

      ＆：：後 {
        コンテンツ： "";
        表示: ブロック;
        高さ: 25px;
        幅: 25px;
        背景色: #000;
        zインデックス: 4;
        境界線の半径: 50%;
      }

      @keyframes 回転 {
        0%、
        50% {
          テキストシャドウ: なし;
          色: #000;
          変換: rotate(calc(30deg * var(--i))) scale(1);
        }

        50.1%、
        100% {
          テキストシャドウ: 0 0 10px #000,
            0 0 15px #000;
          色: #fff;
          変換: rotate(calc(30deg * var(--i))) scale(1.01);
        }
      }

      。色 {
        位置: 絶対;
        上: 0;
        色: #f2f2f2;
        不透明度: .6;
        フォントサイズ: 20px;
        変換: rotate(calc(30deg * var(--i)));
        変換の原点: 0 250px;
        行の高さ: 50px;
        アニメーション: 5 秒間、直線的に無限回転します。
        アニメーション遅延: calc(0.42s * var(--i));
      }

      @キーフレーム変更1 {
        0% {
          変換: translateY(-50%) 回転(0deg);
          変換の原点: 0 100px;
        }

        100% {
          変換: translateY(-50%) 回転(360度);
          変換の原点: 0 100px;
        }
      }

      @キーフレーム変更2 {
        0% {
          変換: translateY(-50%) 回転(-30deg) 回転(0deg);
          変換の原点: 0 150px;
        }

        100% {
          変換: translateY(-50%) 回転(-30度) 回転(360度);
          変換の原点: 0 150px;
        }
      }

      .時間{
        位置: 絶対;
        上位: 40%
        幅: 5px;
        変換: translateY(-50%);
        高さ: 100px;
        背景色: #f2f2f2;
        アニメーション: change1 24秒 線形無限;

        ＆：：後 {
          コンテンツ： "";
          位置: 絶対;
          上: 0;
          左: -10px;
          幅: 20px;
          高さ: 20px;
          下境界線: 5px 実線 #f2f2f2;
          右境界線: 5px 実線 #f2f2f2;
          変換: 回転(-135度);
        }
      }

      .分{
        位置: 絶対;
        上位: 36%
        幅: 3px;
        高さ: 150px;
        背景色: #000;
        変換: translateY(-50%) 回転(-30deg);
        変換の原点: 0 150px;
        アニメーション: change2 2s 線形無限;

        ＆：：後 {
          コンテンツ： "";
          位置: 絶対;
          上: 0;
          左: -10px;
          // 表示: ブロック;
          幅: 20px;
          高さ: 20px;
          下境界線: 3px 実線 #000;
          右境界線: 3px 実線 #000;
          変換: 回転(-135度);
        }
      }
    }
  }
}