如何使用 CSS 建立旋轉拖尾效果

整體效果如下圖：

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

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

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

第 1 步：設定 HTML 結構

首先，我們要定義 HTML 層次結構。

整個螢幕由三個部分組成：首先是黑色背景（.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;
}

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

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

然後，我們設定內容的大小。

.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;
}

現在圓弧和圓弧的端點已經生成，我們只需要開始旋轉圓弧即可。

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

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

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

然後，將動畫關鍵影格套用到 .circle 類別。

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

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

設定後，將出現如下圖的動畫效果：

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

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

這是最終結果：

以上是如何使用 CSS 建立旋轉拖尾效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！