CSS3 动画实现不停旋转的风车效果

可以使用 CSS3 动画来实现一个不停转动的风车。

首先，在 HTML 中创建一个 div 元素，给它一个 class 名字，比如 'windmill'。

<div class='windmill'></div>

在 CSS 中设置这个 div 元素的宽度和高度，并将它的背景色设置为透明。

.windmill {
  width: 100px;
  height: 100px;
  background-color: transparent;
}

接下来，我们需要用 CSS3 动画来让这个 div 元素旋转起来。我们可以使用 @keyframes 规则来定义动画，然后将它应用到 windmill 类中。

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.windmill {
  width: 100px;
  height: 100px;
  background-color: transparent;
  animation: rotate 2s linear infinite;
}

在上面的代码中，我们定义了一个名为 'rotate' 的动画，从 0 度旋转到 360 度，持续时间为 2 秒，线性运动，无限循环。我们将这个动画应用到 .windmill 类中，这样就可以让这个 div 元素不停地旋转了。

最后，我们可以用 CSS3 伪元素来创建风车的叶子。我们可以使用 :before 和 :after 伪元素来创建两个三角形，然后设置它们的位置和旋转角度。

.windmill:before,
.windmill:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #fff transparent transparent;
}
.windmill:before {
  transform: rotate(45deg);
}
.windmill:after {
  transform: rotate(-45deg);
}

在上面的代码中，我们使用了三角形的技巧，将一个矩形变成了一个三角形。我们将两个三角形分别旋转了 45 度和 -45 度，这样就形成了风车的叶子。

最终的代码如下：

HTML：

<div class='windmill'></div>

CSS：

.windmill {
  width: 100px;
  height: 100px;
  background-color: transparent;
  animation: rotate 2s linear infinite;
  position: relative;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.windmill:before,
.windmill:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #fff transparent transparent;
}
.windmill:before {
  transform: rotate(45deg);
}
.windmill:after {
  transform: rotate(-45deg);
}

效果图：

windmill