js手持小风扇

news2024/10/12 6:27:31

文章目录

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>