整體效果如下圖：

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

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

這里是整體代碼和演示：https://codepen.io/venzil/pen/MWNVy??mY

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

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

整個(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)（通常從 {} 開始，但此處默認(rèn)為當(dāng)前狀態(tài)）旋轉(zhuǎn)一整圈（1 圈為 360 度）。

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

然后，將動(dòng)畫關(guān)鍵幀應(yīng)用到 .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)畫將無限重復(fù)。

設(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 創(chuàng)建旋轉(zhuǎn)拖尾效果的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！