風(fēng)車旋轉(zhuǎn)CSS怎么做旋轉(zhuǎn)部分

在CSS中，我們可以使用transform屬性來(lái)實(shí)現(xiàn)風(fēng)車的旋轉(zhuǎn)效果，以下是一個(gè)簡(jiǎn)單的示例，展示了如何創(chuàng)建一個(gè)旋轉(zhuǎn)的風(fēng)車：

1、HTML結(jié)構(gòu)：

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

2、CSS樣式：

.windmill {
  position: relative;
  width: 200px;
  height: 200px;
}
.windmill-blade {
  position: absolute;
  width: 100px;
  height: 200px;
  background: #333;
  transform-origin: top center;
}
.windmill-blade:nth-child(1) {
  transform: rotate(0deg);
}
.windmill-blade:nth-child(2) {
  transform: rotate(90deg);
}
.windmill-blade:nth-child(3) {
  transform: rotate(180deg);
}
.windmill-blade:nth-child(4) {
  transform: rotate(270deg);
}

3、動(dòng)畫效果：

為了讓風(fēng)車持續(xù)旋轉(zhuǎn)，我們可以添加一個(gè)簡(jiǎn)單的動(dòng)畫：

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.windmill {
  animation: rotate 1s linear infinite;
}

這樣，風(fēng)車就會(huì)持續(xù)不斷地旋轉(zhuǎn)了，你可以根據(jù)需要調(diào)整動(dòng)畫的速度和樣式。