整體效果如下圖：

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

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

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

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

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

整個(gè)螢?zāi)挥扇齻€(gè)部分組成：首先是黑色背景（.container），然後是圓?。?circle），最後是圓弧末端的小點(diǎn)（.dot）。

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

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

CSS 組合

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

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

部分來設(shè)定頁面的黑色背景。

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

透過設(shè)定 height: 100vh;，我們確保

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

然後，我們?cè)O(shè)定內(nèi)容的大小。

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

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

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

先畫一個(gè)正方形，這個(gè)正方形的大小就是我們之前設(shè)定的內(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%;
}

然後，我們只需要把圓的一部分剪掉，讓它看起來像一個(gè)圓弧。

.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)在圓弧和圓弧的端點(diǎn)已經(jīng)生成，我們只需要開始旋轉(zhuǎn)圓弧即可。

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

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

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

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

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

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

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

接下來，我們可以在旋轉(zhuǎn)頭上添加一個(gè)小點(diǎn)來增強(qiáng)動(dòng)畫效果。

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

這是最終結(jié)果：

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