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

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

このチュートリアルでは、CSS を使用して回転する末尾のエフェクトを作成する方法を段階的に説明します。これを?qū)g現(xiàn)するには、要素の幅、高さ、境界線の半徑、背景色、および複數(shù)の影を設(shè)定します。

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

ステップ 1: HTML 構(gòu)造のセットアップ

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

畫面全體は 3 つの部分で構(gòu)成されています。最初に黒い背景 (.container)、次に円弧 (.circle)、最後に円弧の端にある小さな點(diǎn) (.dot) です。

全體的な HTML 構(gòu)造を以下に示します。

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

CSS構(gòu)成

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

まず、HTML の

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

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

高さを 100vh; に設(shè)定することで、

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

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

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

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

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

まず正方形を描畫します。この正方形のサイズは、前に設(shè)定した 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;
}

円弧と円弧の終點(diǎn)が生成されたので、あとは円弧の回転を開始するだけです。

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

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

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

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

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

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

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

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

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

これが最終結(jié)果です:

以上がCSS を使用して回転する末尾効果を作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。