CSS を使用して回転する末尾効果を作成する方法

全体的な効果を以下に示します:

それでは、CSS を使用してこのアニメーションを作成する手順を見てみましょう。

このチュートリアルでは、CSS を使用して回転する末尾のエフェクトを作成する方法を段階的に説明します。これを実現するには、要素の幅、高さ、境界線の半径、背景色、および複数の影を設定します。

全体的なコードとデモは次のとおりです: https://codepen.io/venzil/pen/MWNVy​​mY

ステップ 1: HTML 構造のセットアップ

まず、HTML の階層と構造を定義する必要があります。

画面全体は 3 つの部分で構成されています。最初に黒い背景 (.container)、次に円弧 (.circle)、最後に円弧の端にある小さな点 (.dot) です。

全体的な HTML 構造を以下に示します。

<div class="container">
  <div class="circle">
    <div class="dot"></div>
  </div>
</div>

CSS構成

1. 背景とコンテンツの位置を設定する

まず、HTML の

部分を直接変更して、ページの背景を黒色に設定します。

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

高さを 100vh; に設定することで、

の背景がビューポート全体を占めるようになります。次に、フレックスボックスを使用してコンテンツを水平方向と垂直方向の中央に配置し、ページの中央に配置します。

次に、コンテンツのサイズを設定します。

.container {
  background-color: transparent;
  width: 200px;
  height: 200px;
}

2. 円弧を描いて回転させる

最初のステップは、実際には円の一部である円弧を形成することです。したがって、最初に円全体を描く必要があります。

まず正方形を描画します。この正方形のサイズは、前に設定した 200px の辺の長さのコンテンツ サイズです。

.container .circle {
  border-color: yellow;
  border-style: solid;
  width: 100%;
  height: 100%;
}

次に、border-radius を使用して正方形を円に変えます。

.container .circle {
  border-color: yellow;
  border-style: solid;
  width: 100%;
  height: 100%;

  /* new */
  border-radius: 50%;
}

次に、円の一部をクリップして円弧のように見せるだけです。

.container .circle {
  border-style: solid;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  /* new */
  border-color: yellow transparent transparent yellow;
  border-width: 3px 3px 0 0;
}

円弧と円弧の終点が生成されたので、あとは円弧の回転を開始するだけです。

animate というアニメーション シーケンスを指定する CSS アニメーション キーフレーム (@keyframes) を定義します。

このアニメーション シーケンスでは、要素は初期状態 (通常は {} からですが、ここではデフォルトで現在の状態) から 1 回転します (1 回転は 360 度)。

@keyframes animate {
  to {
    transform: rotate(1turn);
  }
}

次に、アニメーション キーフレームを .circle クラスに適用します。

<div class="container">
  <div class="circle">
    <div class="dot"></div>
  </div>
</div>

1. アニメーション: これはアニメーションの短縮形プロパティであり、アニメーション名、期間、タイミング関数、ループ数などの複数の値を組み合わせることができます。
2. animate: これは、@keyframes animate 定義に対応するアニメーションの名前です。
3. 3 秒: アニメーションの長さ。1 サイクルを完了するのに 3 秒かかることを意味します。
4. リニア: アニメーションのタイミング関数。加速も減速もせずに一定の速度で進むことを示します。
5. 無限: ループ数。アニメーションが無限に繰り返されることを意味します。

設定すると、アニメーション効果は次のように表示されます:

次に、回転するヘッドに小さなドットを追加して、アニメーション効果を強化します。

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

これが最終結果です:

以上がCSS を使用して回転する末尾効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。