前言
兴趣是最好的老师。让我们一起在玩闹中学习吧，这次做个旋转风车吧，学以致用，熟能生巧。
动画.gif
一、制作步骤
- 首先设置一个200*400大小的盒子windmill
- 里面放入三个盒子分别是风车的叶片、固定点、柄，设置背景色，利用绝对定位调整好位置。
- 风车的叶片由四个小盒子组成，利用border画出三角形，通过绝对定位调整好位置。
- 对整个风车的叶片的盒子添加旋转动画。
二、详细代码
html部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>旋转小风车Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="windmill">
<div class="fan">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
<div class="stick"></div>
<div class="dot"></div>
</div>
</body>
</html>
css部分
body {
height: 100vh;
background: pink;
display: flex;
justify-content: center;
align-items: center;
}
.windmill {
position: relative;
width: 200px;
height: 400px;
}
.fan {
position: relative;
width: 200px;
height: 200px;
animation: rotate 3s linear infinite;
}
.fan:hover {
animation: rotate 1s linear infinite;
}
.stick {
position: absolute;
left: 92px;
bottom: 0px;
z-index: -1;
width: 16px;
height: 300px;
background: #b67e4f;
border-radius: 20px;
}
.dot {
position: absolute;
left: 90px;
top: 90px;
z-index: 1;
width: 20px;
height: 20px;
border-radius: 50%;
background: #515151;
}
.top {
position: absolute;
top: 0px;
left: 0px;
border-top: 50px solid transparent;
border-right: 50px solid #f4d458;
border-bottom: 50px solid #f6ef9b;
border-left: 50px solid #f6ef9b;
}
.right {
position: absolute;
top: 0px;
right: 0px;
border-top: 50px solid #f28b1c;
border-right: 50px solid transparent;
border-bottom: 50px solid #e63e3b;
border-left: 50px solid #f28b1c;
}
.bottom {
position: absolute;
bottom: 0px;
right: 0px;
border-top: 50px solid #8cb3df;
border-right: 50px solid #8cb3df;
border-bottom: 50px solid transparent;
border-left: 50px solid #3874b9;
}
.left {
position: absolute;
bottom: 0px;
left: 0px;
border-top: 50px solid #32b273;
border-right: 50px solid #c3d864;
border-bottom: 50px solid #c3d864;
border-left: 50px solid transparent;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
gitee地址：siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)
每天一个网页小案例，生活多姿又多彩。
