[分享]css动画怎么让风车动起来

如果你正在学习CSS动画，那么让一个风车旋转是一个很好的练习。下面是一个简单的教程，介绍如何使用CSS动画来让风车旋转。/ 首先，我们来定义风车的外框 / .windmill { : relative...

如果你正在学习CSS动画，那么让一个风车旋转是一个很好的练习。下面是一个简单的教程，介绍如何使用CSS动画来让风车旋转。

/* 首先，我们来定义风车的外框 */
.windmill {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50%;
}

/* 下面是风车的螺旋形翼片 */
.windmill:before,
.windmill:after {
  content: ';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  transform-origin: 0 0;
}

/* 左上角螺旋形翼片 */
.windmill:before {
  top: 0;
  left: 0;
  transform: rotate(45deg);
}

/* 右下角螺旋形翼片 */
.windmill:after {
  bottom: 0;
  right: 0;
  transform: rotate(-45deg);
} 

在上面的CSS代码中，我们定义了一个风车外框和两个螺旋形翼片。现在让我们来添加动画效果来让风车旋转起来。

/* 定义动画效果 */
@keyframes rotate {
  /* 定义从0度到360度的旋转 */
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 将动画效果应用到螺旋形翼片 */
.windmill:before,
.windmill:after {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: rotate;
  animation-timing-function: linear;
} 

在上面的CSS代码中，我们定义了名为“rotate”的CSS动画，该动画将在一秒钟内使元素旋转360度。我们将这个动画应用于“before”和“after”伪元素，使风车的两个螺旋形翼片旋转起来。

现在，我们已经成功地使用CSS动画让风车旋转了。如果你想让风车的旋转速度更快或更慢，可以调整“animation-duration”属性的值。试试吧！