html风车旋转代码
时间: 2023-12-31 08:03:44 浏览: 138
以下是一个简单的HTML风车旋转代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.windmill {
width: 100px;
height: 100px;
background-color: #f1f1f1;
position: relative;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.blade {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 100%;
animation: blade-spin 1s infinite linear;
}
@keyframes blade-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="windmill">
<div class="blade"></div>
<div class="blade" style="transform: rotate(90deg);"></div>
<div class="blade" style="transform: rotate(180deg);"></div>
<div class="blade" style="transform: rotate(270deg);"></div>
</div>
</body>
</html>
```
这段代码创建了一个风车动画效果。通过使用CSS3的`transform: rotate()`属性和`@keyframes`关键帧动画,我们可以实现风车的旋转效果。风车的每个叶片都是一个矩形元素,通过设置不同的`transform: rotate()`值来控制叶片的旋转角度。整个风车元素使用`animation`属性来应用旋转动画,并设置无限循环和线性动画。
阅读全文