css3风车怎么做

在CSS3中，我们可以通过一些属性来创建一个非常酷炫的风车动画。下面我们来看一下具体的实现方式：

.windmill {
  width: 100px; /* 风车大小 */
  height: 100px;
  position: relative;
  margin: 0 auto;
}
.windmill .blade {
  width: 100%; /* 叶片大小 */
  height: 100%;
  position: absolute;
  background-color: blue;
  transform-origin: 0% 50%; /* 设置旋转中心点 */
  animation: rotate 2s ease-in-out infinite;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.windmill .blade:nth-child(2) {
  background-color: yellow; /* 为第二片叶片设置不同的颜色 */
}

首先，我们需要创建一个容器元素，设置宽高和定位属性，以便后面的绝对定位元素可以对其进行定位。接着，我们将叶片作为子元素并设置其宽高、绝对定位和背景颜色。

接下来的关键是设置叶片的旋转中心。我们使用CSS3的transform-origin属性，将其设置为左边缘（0%）中心点（50%）。这样，我们就可以使用CSS3的transform属性，将叶片按照指定的旋转中心进行旋转。

最后我们需要为叶片添加动画效果。在这里，我们使用CSS3的@keyframes规则来定义旋转的动画，并将其应用到叶片上。同时，为了使风车不停旋转，我们将动画设置为无限重复的。

通过上述代码实现，我们就可以创建一个非常炫酷的风车动画了！