八卦图炫酷动态效果

最新推荐文章于 2023-07-04 14:04:11 发布
最新推荐文章于 2023-07-04 14:04:11 发布
阅读量712 收藏 6
点赞数 3
文章标签： css html css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZL3064436257/article/details/129526062
版权

使用 纯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>

等风来吖～
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
jQuery八卦图背景时钟特效代码
03-20
jQuery八卦图背景时钟代码是一款具有中国风的特色的时间结合八卦图算风水时钟代码。
jQuery八卦图背景时钟代码
06-24
jQuery八卦图背景时钟代码是一款具有中国风的特色的时间结合八卦图算风水时钟代码。
12行javascript代码绘制一个八卦图
10-24
本文给大家分享的是使用有限的代码绘制八卦图，算是考核下自己对于javascript的理解，这里推荐给大家，有需要的小伙伴参考下。
使用canvas做一个八卦图（动态的）
weixin_43478869的博客
12-04 1060
用canvas做一个太极的效果 先说一下思路 画一个大圆，然后在分割成两个半圆（是太极的那种半圆，不是直接分两个半圆），然后在再两个半圆中画两小圆。大概思路就是这样的。 先给你们放个图看一下（颜色你可以随便调） 下来给你上代码 &lt;script type="text/javascript"&gt; // 获取canvas元素 var canvas = document.q...
web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation
“代码农”微信公众号
03-10 3861
web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation
html制作动态八卦图源码
weixin_43474701的博客
12-14 2636
动态八卦图 自动旋转的八卦图，一个html文件就行，如下动态图所示： taijitu.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="taiji"> </div> </body> <style&gt
动态八卦图html,用CSS实现阴阳八卦图等图形_html/css_WEB-ITnose
weixin_35472986的博客
06-08 348
CSS还是比较强大的，可以实现中国古典的“阴阳八卦图”等形状。正方形#rectangle { width: 200px; height: 100px; backgrount-color: red; } #circle { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; bo...
CSS + JavaScript 实现八卦太极图
Twinkle_sone的博客
02-16 1058
CSS + JavaScript 实现八卦太极图 1、中间太极鱼图案的实现 html部分 <div class = "taiji" ></div> css部分 .taiji{ width: 300px; height: 300px; border-radius: 50%; position: relative; margin: 200px auto; top:150px; background-image: linear-gradient.
生成一个太极八卦阵的动画HTML代码
weixin_35756892的博客
01-03 448
太极八卦阵是中国武术中的一种招式，可以用HTML代码来创建动画。下面是一个简单的示例，使用HTML、CSS和JavaScript实现： <html> <head> <style> /* 定义动画的样式 */ @keyframes spin { from { transform: rotate(0deg); } ...
CSS大揭秘：如何用少量代码实现惊人效果，你绝对不能错过的CSS技巧！由简到难~旋转的太极八卦图
最新发布
m0_70031574的博客
07-04 254
@keyframes 的基本语法示例： @keyframes animation-name { 0% { /* 定义动画开始时的样式 */ } 50% { /* 定义动画进行到一半时的样式 */ } 100% { /* 定义动画结束时的样式 */ } div { animation: myAnimation 2s linear 1s infinite alternate; } }
旋转的八卦图.html
11-30
是用HTML、CSS代码来实现2D旋转，用定位和动画做出八卦图自动旋转，鼠标经过停止，鼠标离开，继续旋转。
jQuery八卦图算风水时钟插件
06-10
这是一款具有中国风的特色的jQuery八卦图背景算风水时钟插件，jQuery网页时间代码。
VB绘画不停旋转的太极图八卦图
05-11
画太极八卦图的VB源码，实现在窗口上画一个不断旋转的太极图，创建刷子(参数:颜色值)返回值:刷子句柄，传递设备(参数:图片句柄,设备句柄)返回值:传递后ID，删除设备(参数:设备句柄)返回值:成功或失败信息[删除前需要...
C# 画八卦图 Graphic
12-04
自己写的一个画图类，在指定的画布上画出指定大小的八卦图.
css画太极图(阴阳八卦)
09-25
css画太极图，样式很简单，大家看下面的代码吧
css3绘制八卦图及动画效果
CodingNoob
04-10 3690
原理很简单，就是外面加个盒子box。作为旋转动画的box，然后里面分别利用两个div使用css3的 border-radius绘制半圆，分别定位在上下中间对齐两个位置，里面在放两个小的原点水平和垂直方向对齐即可实现。然后在使用Css3的animation属性制作动画。效果如下图。
【Canvas】js用Canvas绘制阴阳太极图动画效果
TA远方
11-27 872
学习JavaScript是否兴趣缺缺，那就需要来一个兴趣学习，问一下有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，这里有一个例子，如何用canvas画阴阳太极图动图效果，接下来开始讲，边学边做。
动态八卦图在手机中
raoyongchao的专栏
07-13 2649
Code: import javax.microedition.midlet.*;    import javax.microedition.lcdui.*;       /**    * @author user    */   public class Midlet extends MIDlet {   
八卦罗盘动态时钟（C实现）
09-12
此罗盘可跟随系统当前时间自动走针，并且对应有十二时辰，八卦阵显示。
用python画哟个炫酷的太极八卦动态图
05-12
好的，我可以给您提供一个用 Python 和 Matplotlib 库绘制太极八卦的动态图的代码。 ```python import numpy as np import matplotlib.pyplot as plt import matplotlib.animation as animation fig, ax = plt.subplots() # 画一个黑色的圆 theta = np.linspace(0, 2*np.pi, 1000) x = np.cos(theta) y = np.sin(theta) ax.plot(x, y, color='black') # 画出阴阳两部分的图案 yin = ax.fill_between(x, y, where=y<0, color='black') yang = ax.fill_between(x, y, where=y>0, color='white') # 添加动画效果 def animate(i): yin.set_facecolor(plt.cm.binary(i/100)) yang.set_facecolor(plt.cm.binary(i/100+0.5)) return yin, yang ani = animation.FuncAnimation(fig, animate, frames=100, interval=50, blit=True) plt.axis('off') plt.show() ``` 运行上述代码，您将会看到一个动态的太极八卦图。您可以根据需要对代码进行修改，例如更改动画效果或调整图案大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值