css动画做成风车转动的效果

CSS动画可以创建出风车转动的效果通过关键帧动画（@keyframes）和transform属性结合。下面是一个简单的步骤描述：

1. **设置基础样式**：首先，给风车元素添加基本样式，比如定位、大小、颜色等。例如，你可以创建几个div元素作为风车的叶片。

.windmill {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #6790F3;
}

2. **创建关键帧动画**：定义两个关键帧，一个代表静止状态，另一个代表旋转状态。例如，风车从0度开始，每步增加一定角度（如360度），模拟转动。

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

3. **应用动画**：将动画应用到风车元素上，并设置动画持续时间和是否循环播放。

.windmill {
  animation: spin 4s linear infinite; /* 持续4秒，线性速度，无限循环 */
}

4. **可选：添加叶片效果** 如果想让叶片更逼真，可以考虑使用`transform-origin`调整叶片的旋转中心，或者使用伪元素（`:before`和`:after`)制作叶片。

.windmill::before,
.windmill::after {
  content: "";
  display: block;
  width: calc(50% - 10px);
  height: 50%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: rotate(-45deg) skewX(-20deg);
}