js手持小风扇-编程知识

js手持小风扇

文章目录

1. 演示效果
2. 分析思路
3. 代码实现

1. 演示效果

QQ录屏20240325092852 -original-original

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>