写一个js风车的特效
时间: 2023-02-26 08:18:02 浏览: 72
可以使用JavaScript和CSS来实现风车的特效。下面是一个简单的例子:
HTML:
```
<div class="windmill">
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
</div>
```
CSS:
```
.windmill {
height: 200px;
width: 200px;
position: relative;
margin: 50px auto;
}
.blade {
height: 20px;
width: 100px;
background-color: #333;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -10px;
transform-origin: bottom center;
transform: rotate(60deg);
animation: spin 4s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
```
这个例子使用了CSS动画和变换,将风车的每个叶片旋转360度,形成风车转动的效果。