HTML5写一个简单旋转风车的代码
时间: 2023-12-01 21:58:31 浏览: 88
旋转风车代码
可以使用 CSS3 的 transform 属性实现一个简单的旋转风车效果。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转风车</title>
<style>
.windmill {
width: 100px;
height: 100px;
border: 2px solid black;
border-radius: 50%;
position: relative;
animation: rotate 2s linear infinite;
}
.blade {
width: 50%;
height: 4px;
background-color: black;
position: absolute;
top: 48%;
left: 25%;
transform-origin: 0 0;
animation: blade-rotate 1s linear infinite;
}
.blade:nth-child(2) {
transform: rotate(90deg);
}
.blade:nth-child(3) {
transform: rotate(180deg);
}
.blade:nth-child(4) {
transform: rotate(270deg);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blade-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="windmill">
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
</div>
</body>
</html>
```
在这个代码中,我们使用了一个 `.windmill` 容器来包含四个 `.blade` 元素,每个 `.blade` 元素都相对于 `.windmill` 旋转,并且每个 `.blade` 元素的旋转角度相差 90 度,以形成风车的效果。我们使用了 CSS3 的 `animation` 属性来控制旋转和动画效果。
你可以将这个代码复制到一个 HTML 文件中,并在浏览器中运行,就可以看到一个简单的旋转风车效果了。
阅读全文