巧夺天工的纯CSS风车动画！动画定位超绝技巧，美妙绝伦！

2023-09-25 11:47:25

在浩瀚的互联网世界中，动态元素和动画效果可以让网站变得生动活泼，令人印象深刻。今天，我们将专注于使用纯CSS实现的风车动画，通过这种巧夺天工的动画效果，让您的网站更上一层楼。

1. HTML结构搭建

首先，创建一个简单的HTML结构，如下所示：

<div class="container">
  <div class="windmill">
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
  </div>
</div>

在这里，<div class="container">是风车的外层容器，<div class="windmill">是风车的主体，内部包含四个<div class="blade">，代表风车的四个叶片。

2. CSS样式

接下来，我们开始使用CSS来设计风车的外观和动画效果。首先，让我们定义<div class="container">的样式：

.container {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 0 auto;
}

这个容器的大小为500px乘以500px，它被设置为相对定位，以便将风车主体<div class="windmill">相对于其父元素进行定位。

接着，我们定义<div class="windmill">的样式：

.windmill {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate 5s linear infinite;
}

这个风车主体的大小为200px乘以200px，它被设置为绝对定位，并使用transform属性将其相对于父元素居中。此外，我们还添加了animation属性，定义了一个名为“rotate”的动画，该动画将在5秒内以线性的速度无限旋转。

3. 风车叶片的样式和动画

现在，让我们定义风车叶片的样式和动画效果：

.blade {
  width: 50px;
  height: 100px;
  position: absolute;
  background-color: #ff0000;
  transform-origin: 50% 100%;
  animation: spin 5s linear infinite;
}

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