首页 前端知识 八卦图炫酷动态效果

八卦图炫酷动态效果

2024-08-21 22:08:36 前端知识 前端哥 940 510 我要收藏

使用 纯html+css+js 制作一个八卦图炫酷旋转效果

 

效果如下:

八卦图炫酷动态效果制作

完整代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>卜卦</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        width: 100vw;
        height: 10vh;
        overflow: hidden;
        background-color: rgba(230, 215, 203, 0.3);
      }
      div {
        box-sizing: border-box;
      }
      .box {
        width: 100%;
        padding-bottom: 100%;
        background-size: 100% 100%;
      }
      .one_rotae {
        animation: oneTurn 20s linear infinite forwards !important;
      }
      .two_rotae {
        animation: oneTurn 30s linear infinite forwards !important;
      }
      .three_rotae {
        animation: twoTurn 35s linear infinite forwards !important;
      }
      @keyframes oneTurn {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }
      @keyframes twoTurn {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(-360deg);
        }
      }

      .box_w {
        position: fixed;
        left: 50%;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 450px;
        width: 100vw;
        height: 100vw;
        z-index: 10;
        transform: translate(-50%, -50%) scale(1.5);
        animation: mins 0.4s linear forwards !important;
        transition: 0.7s all;
      }
      @keyframes mins {
        0% {
          transform: translate(-50%, -50%) scale(1.2);
        }
        50% {
          transform: translate(-50%, -50%) scale(1.4);
        }
        100% {
          transform: translate(-50%, -50%) scale(1);
        }
      }
      .box_w1 {
        z-index: 9;
      }
      .box_w2 {
        z-index: 8;
      }
      .box_w3 {
        z-index: 7;
      }
      .box_w4 {
        z-index: 6;
      }
      .box0 {
        background: url(./image/bg_000/1.png) no-repeat;
        background-size: 100% 100%;
      }
      .box1 {
        background: url(./image/bg_000/2.png) no-repeat;
        background-size: 100% 100%;
      }
      .box2 {
        background: url(./image/bg_000/3.png) no-repeat;
        background-size: 100% 100%;
      }
      .box3 {
        background: url(./image/bg_000/4.png) no-repeat;
        background-size: 100% 100%;
      }
      .box4 {
        background: url(./image/bg_000/5.png) no-repeat;
        background-size: 100% 100%;
      }
      .box5 {
        background: url(./image/bg_000/6.png) no-repeat;
        background-size: 100% 100%;
      }
      .box6 {
        background: url(./image/bg_000/7.png) no-repeat;
        background-size: 100% 100%;
      }

      .box7 {
        background: url(./image/bg_000/8.png) no-repeat;
        background-size: 100% 100%;
      }
      .box8 {
        background: url(./image/bg_000/9.png) no-repeat;
        background-size: 100% 100%;
      }
      .max9 {
        transform: translate(-50%, -50%) scale(1);
        animation: max9 1s linear forwards !important;
      }
      @keyframes max9 {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }

        100% {
          transform: translate(-50%, -50%) scale(1.9);
        }
      }
      .max8 {
        transform: translate(-50%, -50%) scale(1);
        animation: max8 1s linear forwards !important;
      }
      @keyframes max8 {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }

        100% {
          transform: translate(-50%, -50%) scale(1.8);
        }
      }
      .max7 {
        transform: translate(-50%, -50%) scale(1);
        animation: max7 1s linear forwards !important;
      }
      @keyframes max7 {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }

        100% {
          transform: translate(-50%, -50%) scale(1.7);
        }
      }
      .max6 {
        transform: translate(-50%, -50%) scale(1);
        animation: max6 1s linear forwards !important;
      }
      @keyframes max6 {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }

        100% {
          transform: translate(-50%, -50%) scale(1.6);
        }
      }
      .max5 {
        transform: translate(-50%, -50%) scale(1);
        animation: max5 1s linear forwards !important;
      }
      @keyframes max5 {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }

        100% {
          transform: translate(-50%, -50%) scale(1.5);
        }
      }
      .max4 {
        transform: translate(-50%, -50%) scale(1);
        animation: max4 1s linear forwards !important;
      }
      @keyframes max4 {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }

        100% {
          transform: translate(-50%, -50%) scale(1.4);
        }
      }
      .max3 {
        transform: translate(-50%, -50%) scale(1);
        animation: max3 1s linear forwards !important;
      }
      @keyframes max3 {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }

        100% {
          transform: translate(-50%, -50%) scale(1.3);
        }
      }
      .max2 {
        transform: translate(-50%, -50%) scale(1);
        animation: max2 1s linear forwards !important;
      }
      @keyframes max2 {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }

        100% {
          transform: translate(-50%, -50%) scale(1.2);
        }
      }
      .max1 {
        transform: translate(-50%, -50%) scale(1);
        animation: max1 1s linear forwards !important;
      }
      @keyframes max1 {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }

        100% {
          transform: translate(-50%, -50%) scale(1.1);
        }
      }
      .max {
        transform: scale(1);
        animation: max 10s linear forwards !important;
      }
      @keyframes max {
        0% {
          transform: scale(1) rotate(0deg);
        }

        100% {
          transform: scale(50) rotate(10000deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="boxs"></div>

    <script>
      let boxs = document.querySelector(".boxs");
      for (let i = 0; i <= 8; i++) {
        setTimeout(function timer() {
          let box_item = document.createElement("div");
          box_item.setAttribute("class", `box_w box_w${i + 1}`);
          box_item.innerHTML = `<div class="box${i} box"></div>`;
          boxs.appendChild(box_item);
        }, i * 500);
        setTimeout(() => {
          if (i == 0) {
            document.querySelector(`.box${i}`).classList.add("one_rotae");
          } else if (i % 2 == 0) {
            document.querySelector(`.box${i}`).classList.add("two_rotae");
          } else {
            document.querySelector(`.box${i}`).classList.add("three_rotae");
          }
          document.querySelector(
            `.box${i}`
          ).style.transform = `translate(-50%, -50%) scale(${2})`;
        }, i * 500 + 500);
      }
      setTimeout(() => {
        let m = 10;
        for (let j = 9; j >= 1; j--) {
          m--;
          document.querySelector(`.box_w${m}`).classList.add(`max${m}`);
        }
      }, 5000);
    </script>
  </body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16419.html
标签
评论
发布的文章

HTML5入门基础

2024-06-16 09:06:50

HTML(二) 元素分类

2024-08-30 20:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!