整體效果如下圖：

好吧，讓我們逐步完成使用 CSS 建立此動畫的步驟。

在本教學中，我們將逐步指導您如何使用 CSS 建立旋轉(zhuǎn)拖尾效果。我們將透過設定元素的寬度、高度、邊框半徑、背景顏色和多個陰影來實現(xiàn)這一點。

這裡是整體程式碼和示範：https://codepen.io/venzil/pen/MWNVmY

第 1 步：設定 HTML 結(jié)構(gòu)

首先，我們要定義 HTML 層次結(jié)構(gòu)。

整個螢幕由三個部分組成：首先是黑色背景（.container），然後是圓弧（.circle），最後是圓弧末端的小點（.dot）。

整體 HTML 結(jié)構(gòu)如下圖所示。

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

CSS 組合

1. 設定背景和內(nèi)容位置

首先，我們透過直接修改HTML的

部分來設定頁面的黑色背景。

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

透過設定 height: 100vh;，我們確保

背景填滿整個視窗。接下來，我們使用flexbox將內(nèi)容水平和垂直居中，並將其放置在頁面的中心。

然後，我們設定內(nèi)容的大小。

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

2. 繪製圓弧並旋轉(zhuǎn)它

第一步是形成弧線，它實際上是圓的一部分。因此，我們需要先畫出整個圓。

先畫一個正方形，這個正方形的大小就是我們之前設定的內(nèi)容大小，邊長為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;
}

現(xiàn)在圓弧和圓弧的端點已經(jīng)生成，我們只需要開始旋轉(zhuǎn)圓弧即可。

定義一個 CSS 動畫關(guān)鍵影格 (@keyframes)，它指定一個名為 animate 的動畫序列。

在此動畫序列中，元素將從其初始狀態(tài)（通常從 {} 開始，但此處預設為當前狀態(tài)）旋轉(zhuǎn)一整圈（1 圈為 360 度）。

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

然後，將動畫關(guān)鍵影格套用到 .circle 類別。

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

1. Animation：這是動畫的簡寫屬性，可以組合多個值，例如動畫名稱、持續(xù)時間、定時函數(shù)、循環(huán)次數(shù)等
2. animate：這是動畫的名稱，對應@keyframes animate 定義。
3. 3s：動畫的持續(xù)時間，即完成一個循環(huán)需要3秒鐘。
4. Linear：動畫的計時函數(shù)，表示以勻速進行，沒有加速或減速。
5. 無限：循環(huán)次數(shù)，意味著動畫將無限重複。

設定後，將出現(xiàn)如下圖的動畫效果：

接下來，我們可以在旋轉(zhuǎn)頭上添加一個小點來增強動畫效果。

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

這是最終結(jié)果：

以上是如何使用 CSS 建立旋轉(zhuǎn)拖尾效果的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！