帮我写一个HTM风扇动画程序
时间: 2023-08-28 10:32:54 浏览: 34
当然可以。HTML风扇动画程序可以使用CSS动画和JavaScript来实现。以下是一个简单的示例代码:
HTML代码:
```html
<div class="fan">
<div class="blade blade1"></div>
<div class="blade blade2"></div>
<div class="blade blade3"></div>
<div class="blade blade4"></div>
</div>
```
CSS代码:
```css
.fan {
width: 200px;
height: 200px;
position: relative;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.blade {
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -5px;
width: 10px;
height: 150px;
border-radius: 10px;
background-color: #ccc;
transform-origin: bottom center;
}
.blade1 {
transform: rotate(0deg);
}
.blade2 {
transform: rotate(90deg);
}
.blade3 {
transform: rotate(180deg);
}
.blade4 {
transform: rotate(270deg);
}
.fan:hover .blade {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
```
JavaScript代码:
```javascript
// JavaScript代码不需要添加
```
这段代码定义了一个圆形的风扇,风扇由4个叶片组成。当鼠标悬停在风扇上时,叶片将开始旋转,形成一个旋转的效果。你可以根据需要调整风扇的大小和颜色。