1. 演示效果
2. 分析思路
- 先编写动画，让风扇先转起来。
- 使用 js 控制动画的持续时间。
- 监听按钮的点击事件，在事件中修改元素的
animation-duration属性。
3. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>手持小风扇</title>
<style>
html,
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.box {
position: relative;
width: 220px;
height: 420px;
}
.top-part {
width: 220px;
height: 220px;
box-sizing: border-box;
position: relative;
}
.top-part .left-box {
width: 220px;
height: 220px;
box-sizing: border-box;
border-radius: 50%;
border: 8px solid #333;
animation: myRotate infinite linear;
}
@keyframes myRotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.top-part .left-box .leaf {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 100px;
margin-left: -25px;
border-radius: 50%;
background-color: rgb(106, 106, 235);
margin-top: -100px;
}
.top-part .left-box .leaf:nth-child(2) {
transform: rotate(120deg);
transform-origin: 50% 100%;
}
.top-part .left-box .leaf:nth-child(3) {
transform: rotate(240deg);
transform-origin: 50% 100%;
}
.line-box .line {
position: absolute;
top: 50%;
left: 0px;
width: 212px;
height: 2px;
background-color: #333;
z-index: 10;
}
.line-box .line:nth-child(2) {
transform: rotate(30deg);
}
.line-box .line:nth-child(3) {
transform: rotate(60deg);
}
.line-box .line:nth-child(4) {
transform: rotate(90deg);
}
.line-box .line:nth-child(5) {
transform: rotate(120deg);
}
.line-box .line:nth-child(6) {
transform: rotate(150deg);
}
.line-box .mid-dot {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
background-color: #333;
z-index: 11;
border-radius: 50%;
}
.bom-part {
width: 50px;
height: 200px;
background-color: #333;
position: absolute;
top: 215px;
left: 50%;
margin-left: -25px;
}
.bom-part .item {
color: white;
width: 22px;
height: 22px;
background-color: rgb(106, 106, 235);
border-radius: 50%;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
margin: 0px auto;
margin-top: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="top-part">
<div class="line-box">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="mid-dot"></div>
</div>
<div class="left-box">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
</div>
<div class="bom-part">
<div class="item" onclick="run(1)">1</div>
<div class="item" onclick="run(0.5)">2</div>
<div class="item" onclick="run(0.2)">3</div>
<div class="item" onclick="run(0)">关</div>
</div>
</div>
<script>
function run(num) {
document.querySelector(".left-box").style.animationDuration = num + "s";
}
</script>
</body>
</html>
