用html写一个转动的风车的代码
时间: 2024-01-26 11:02:43 浏览: 68
好的,下面是一个简单的 HTML 和 CSS 代码示例,可以创建一个旋转的风车效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>旋转风车</title>
<style>
/* 定义旋转动画 */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 定义风车的四个翼片 */
.wheel {
position: absolute;
width: 50px;
height: 50px;
background-color: #fff;
transform-origin: center center;
animation: spin 2s linear infinite;
}
/* 定义风车的四个方向 */
.north {
top: 0;
left: 25px;
border-top: 50px solid #f00;
border-right: 25px solid transparent;
border-left: 25px solid transparent;
z-index: 2;
}
.south {
bottom: 0;
left: 25px;
border-bottom: 50px solid #00f;
border-right: 25px solid transparent;
border-left: 25px solid transparent;
z-index: 1;
}
.east {
top: 25px;
right: 0;
border-right: 50px solid #0f0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 3;
}
.west {
top: 25px;
left: 0;
border-left: 50px solid #000;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 4;
}
</style>
</head>
<body>
<div class="wheel north"></div>
<div class="wheel south"></div>
<div class="wheel east"></div>
<div class="wheel west"></div>
</body>
</html>
```
你可以将这段代码复制到一个 HTML 文件中,并在浏览器中打开,就可以看到一个简单的旋转风车效果了。
阅读全文