風車轉(zhuǎn)圈的CSS魔法

在CSS中，我們可以使用動畫（animation）來實現(xiàn)風車的旋轉(zhuǎn)，我們需要定義一個包含風車圖案的HTML元素，然后通過CSS為該元素添加動畫效果。

HTML部分：

<div class="windmill">
  <div class="windmill-blade"></div>
  <div class="windmill-blade"></div>
  <div class="windmill-blade"></div>
  <div class="windmill-blade"></div>
</div>

CSS部分：

.windmill {
  position: relative;
  width: 200px;
  height: 200px;
}
.windmill-blade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-color: blue;
  transform-origin: 100% 50%; /* 設(shè)置旋轉(zhuǎn)中心為右側(cè)中點 */
}
.windmill-blade:nth-child(1) { transform: rotate(0deg); } /* ***片扇葉不旋轉(zhuǎn) */
.windmill-blade:nth-child(2) { transform: rotate(90deg); } /* 第二片扇葉旋轉(zhuǎn)90度 */
.windmill-blade:nth-child(3) { transform: rotate(180deg); } /* 第三片扇葉旋轉(zhuǎn)180度 */
.windmill-blade:nth-child(4) { transform: rotate(270deg); } /* 第四片扇葉旋轉(zhuǎn)270度 */

我們需要讓風車每旋轉(zhuǎn)一圈后，各片扇葉的角度重置為初始狀態(tài)，為了實現(xiàn)這一點，我們可以使用CSS的@keyframes規(guī)則來定義一個動畫，讓風車在旋轉(zhuǎn)一圈后回到初始狀態(tài)。

@keyframes windmill-rotation {
  from { transform: rotate(0deg); } /* 初始狀態(tài) */
  to { transform: rotate(360deg); } /* 旋轉(zhuǎn)一圈后回到初始狀態(tài) */
}

我們需要將這個動畫應(yīng)用到風車上，通過animation屬性，我們可以設(shè)置動畫的持續(xù)時間、延遲時間以及循環(huán)次數(shù)，這里我們設(shè)置動畫持續(xù)時間為1s，無延遲時間，并且讓動畫無限循環(huán)。

.windmill {
  /* 其他樣式... */
  animation: windmill-rotation 1s infinite; /* 應(yīng)用動畫 */
}

你的風車就可以在CSS的魔法下旋轉(zhuǎn)起來了！