[分享]css3动画风车代码

CSS3动画风车代码

.windmill {
  width: 100px;
  height: 100px;
  position: relative;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.windmill-blade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: blade 1s linear infinite;
}

@keyframes blade {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.windmill-blade:first-of-type {
  animation-delay: 0.33s;
}

.windmill-blade:nth-of-type(2) {
  animation-delay: 0.66s;
} 

CSS3动画风车代码讲解

首先，我们定义了一个名为“windmill”的CSS类，它用于包含整个风车元素。我们将其宽度和高度设置为100px，并将其定位设置为相对。我们使用了CSS3动画属性“animation”，让风车沿着“spin”动画动起来，并且让动画无限循环。

接下来，我们定义了一个名为“spin”的CSS动画，它定义了风车旋转的起始和终止状态。

在“windmill”类下面，我们定义了一个名为“windmill-blade”的子类，用于表示每一个风车叶片的元素。

我们将每个叶片的定位设置为绝对，以便它相对于“windmill”元素进行定位。我们还将每个叶片的宽度和高度设置为100%，以便将其铺满整个风车元素。

我们使用了CSS3变换属性“transform-origin”，以确定每个叶片围绕哪个点进行旋转。在本例中，我们将其设置为50%和100%，这意味着叶片将围绕底部中心点进行旋转。

我们还使用了CSS3动画属性“animation”，并将其设置为名为“blade”的动画，以使每个叶片沿该动画进行旋转。我们将其设置为1秒的持续时间，并使其无限循环。此外，我们为每个叶片设置了动画延迟时间，以便它们在不同的时间内开始旋转。

最后，在“blade”动画下，我们定义了叶片的起始和终止状态。在0％的时间点，叶片将不旋转。在50％的时间点，叶片将旋转180度，而在100％的时间点，叶片将旋转360度，回到原始位置。