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

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

ここに画像の説明を挿入

仕事を探しています!!!

事前準備:

まず、このアニメーションは、以前のローディングアニメーションとクールなローディングアニメーションに基づいて作成されています。アイデアは同じですが、このアニメーションでは革新が行われました。

プレビューの知識ポイント:

  • アニメーションフレーム
  • 背景グラデーション
  • var() と calc() の使用
  • フレックスレイアウトシナリオ
  • 複数のアニメーション操作
  • 遅延アニメーションの使用

始める

コアコード分析

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

HTML 上に構築されたスタイルに従って、対応する各 i 値を取得し、各瞬間のボックスの回転角度を計算します。同時に、初期の回転ポイントを変更します。そうしないと、各ボックスは中心の周りを回転して円になります。

考え方は読み込みと同じですが、今回はサイズ比が拡大されています。

ここに画像の説明を挿入

HTML コードの構築:

<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度);
        }
      }
    }
  }
}

これで、CSS で美しい時計アニメーション効果を実装するためのサンプル コードに関するこの記事は終了です。CSS 時計アニメーションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  ウィンドウの中央にブロック要素の位置を設定する方法

>>:  Linux でファイル権限を変更する chmod コマンドの詳細な分析

推薦する

Nginx インストール エラーの解決方法

1. nginx-1.8.1.tar.gzを解凍する2. fastdfs-nginx-module-...

Linux での MySQL 8.0 インストール チュートリアル

この記事では、LinuxでMySQL 8.0をインストールする方法を紹介します。具体的な内容は次のと...

SSHトンネルを使用してMySQLサーバーに接続する方法

序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...

FileZilla Server の FTP サーバー構成と 425 エラーおよび TLS 警告の解決策の詳細な説明

123WORDPRESS.COM では、FileZilla のダウンロード リンクを提供しています:...

Tencent Cloud で HTTPS を無料で導入する方法

最近、WeChatアプレットを書いていたとき、WeChatアプレットではすべてのリクエストインターフ...

MySQL 5.7 zip アーカイブ バージョンのインストール チュートリアル

この記事では、MySQL 5.7 zipアーカイブ版のインストールチュートリアルを参考までに紹介しま...

CSS3アニメーションジャミングソリューションについての簡単な説明

なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...

フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...

Vue3.xはコンポーネント通信にmitt.jsを使用します

目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...

MybatisはSQLクエリのインターセプションと変更の詳細を実装します

序文インターセプターの機能の 1 つは、特定のメソッドの呼び出しをインターセプトできることです。イン...

MySQL ストアド プロシージャ、カーソル、トランザクションの例の詳細な説明

MySQL ストアド プロシージャ、カーソル、トランザクションの例の詳細な説明以下は私が作成した M...

MySQL共通インデックスとユニークインデックスの詳細な説明

シナリオ1. ID番号のフィールドを備えた市民システムを維持する2. ビジネス コードでは、重複する...

Linux chkconfig コマンドの使用

1. コマンドの紹介chkconfig コマンドは、システム サービスの実行レベル情報を更新および照...

Node.js の非同期イテレータの詳細な説明

目次序文非同期イテレータとは何ですか?非同期イテレータストリームとしてページング機能を備えたAPIの...