web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation

文章目录

前言

哈哈

1、html部分

<divclass="great_ultimate_eight_diagrams_box"><divclass="eight_diagrams_box"><divclass="eight_diagrams"><divclass="eight_diagrams_item"><divclass="yin_yang"><divclass="divinatory_direction_box"><divclass="divinatory_name">天乾</div><divclass="direction">正南</div></div><divclass="yy_box"><divclass="yy_t"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_m"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_b"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div></div></div></div><divclass="eight_diagrams_item"><divclass="yin_yang"><divclass="divinatory_direction_box"><divclass="divinatory_name">风巽</div><divclass="direction">西南</div></div><divclass="yy_box"><divclass="yy_t"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_m"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_b"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div></div></div></div><divclass="eight_diagrams_item"><divclass="yin_yang"><divclass="divinatory_direction_box"><divclass="divinatory_name">水坎</div><divclass="direction">正西</div></div><divclass="yy_box"><divclass="yy_t"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_m"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_b"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div></div></div></div><divclass="eight_diagrams_item"><divclass="yin_yang"><divclass="divinatory_direction_box"><divclass="divinatory_name">山艮</div><divclass="direction">西北</div></div><divclass="yy_box"><divclass="yy_t"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_m"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_b"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div></div></div></div><divclass="eight_diagrams_item"><divclass="yin_yang"><divclass="divinatory_direction_box"><divclass="divinatory_name">地坤</div><divclass="direction">正北</div></div><divclass="yy_box"><divclass="yy_t"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_m"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_b"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div></div></div></div><divclass="eight_diagrams_item"><divclass="yin_yang"><divclass="divinatory_direction_box"><divclass="divinatory_name">雷震</div><divclass="direction">东北</div></div><divclass="yy_box"><divclass="yy_t"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_m"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_b"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div></div></div></div><divclass="eight_diagrams_item"><divclass="yin_yang"><divclass="divinatory_direction_box"><divclass="divinatory_name">火离</div><divclass="direction">正东</div></div><divclass="yy_box"><divclass="yy_t"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_m"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_b"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div></div></div></div><divclass="eight_diagrams_item"><divclass="yin_yang"><divclass="divinatory_direction_box"><divclass="divinatory_name">泽兑</div><divclass="direction">东南</div></div><divclass="yy_box"><divclass="yy_t"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_m"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div><divclass="yy_b"><divstyle="flex: 3;background-color: #333;"></div><divstyle="flex: 1;background-color: #333;"></div><divstyle="flex: 3;background-color: #333;"></div></div></div></div></div></div></div><!-- 太极 --><divclass="great_ultimate_box"><divclass="great_ultimate"></div></div></div>

☺☺☺☺☺☺☺

**关于

html

结构未做优化，望谅解！不过微信小程的代码已经优化好，有需要的伙伴可以私聊。对于页面结构就不做过多阐述，多看几下就明白了咋回事了。**

2、css部分

.great_ultimate_eight_diagrams_box{display: flex;justify-content: center;align-items: center;animation: circularRotation linear infinite 30s;}/* 八卦 */.eight_diagrams_box{position: relative;}.eight_diagrams{width: 410px;height: 410px;position: relative;display: flex;justify-content: center;align-items: center;}.eight_diagrams_item{width: 100px;position: absolute;}.yin_yang{width: 100%;height: 100%;text-align: center;}.divinatory_name{/* 文字两端对齐 */text-align-last: justify;font-size: 20px;font-weight: 700;padding: 0 20px;}.direction{margin-top: 2px;text-align-last: justify;padding: 0 10px;}.yy_box{margin-top: 10px;display: flex;flex-direction: column;align-items: center;}.yy_t,
.yy_m,
.yy_b{width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0;margin: 0;}.yy_m{margin-top: 8px;}.yy_b{margin-top: 8px;}.yy_t div,
.yy_m div,
.yy_b div{width: 100%;height: 8px;}/* 太极 */.great_ultimate_box{position: absolute;}.great_ultimate{width: 270px;height: 270px;border-radius: 50%;/* 圆球上半部分为白色，下半部分为黑色 */background:linear-gradient(to bottom,
            #ffffff 0%,
            #ffffff 50%,
            #000000 50%,
            #000000 100%);position: relative;transform:rotate(-90deg);}.great_ultimate::before{position: absolute;content:"";width: 45.5px;height: 45.5px;border-radius: 50%;border: 45px solid #000000;/* 左侧黑球套白点  */background-color: #FFFFFF;left: 0;top: 50%;transform:translateY(-50%);}.great_ultimate::after{position: absolute;content:"";width: 45.5px;height: 45.5px;border-radius: 50%;border: 45px solid #FFFFFF;/* 右侧白球套黑点 */background-color: #000000;right: 0;top: 50%;transform:translateY(-50%);}@keyframes circularRotation{form{transform:rotate(0deg);}to{transform:rotate(360deg);}}

☺☺☺☺☺☺☺

**八卦图主要就是使用定位，通过

JavaScript

计算每一个

div

的坐标，然后定位到指定位置即可。关于太极图可查看本篇文章了解详情。**

3、JavaScript部分

functioninit(){let elItem = document.querySelectorAll('.eight_diagrams_item'),
        yin_yang = document.querySelectorAll('.yin_yang'),
        radius = document.querySelector('.eight_diagrams').clientWidth /2,
        itemLen = elItem.length,
        pieceDeg =360/ itemLen;for(let i =0; i < itemLen; i++){let t = i * pieceDeg,
            x =undefined,
            y =undefined;

        yin_yang[i].style.transform =`rotate(${t}deg)`;

        t =(Math.PI/180)* t;
        x = Math.sin(t)* radius;
        y =-Math.cos(t)* radius;

        elItem[i].style.transform =`translate(${x}px, ${y}px)`;}}init();

☺☺☺☺☺☺

**定义名为

init

的函数，用来设置旋转元素的坐标。
通过

querySelectorAll

获取一个元素类数组。
通过

querySelector

和

clientWidth

获取外层容器的宽度并除以

2

得到半径。
通过

querySelectorAll

获取内层元素的类数组，并使用

yin_yang

变量保存。
定义

itemLen

变量保存类数组长度。
通过类数组长度计算元素角度的平均值，并保存到

pieceDeg

变量中。
使用

for

循环计算出每个元素的

x

和

y

坐标，

i * pieceDeg

得到角度值；

(Math.PI / 180) * t

得到弧度值，因为编程中的

sin

和

cos

需要通过弧度才能计算出坐标值。**

**

yin_yang[i].style.transform = 'rotate(' + t + 'deg)'

;

elItem[i].style.transform = 'translate(' + x + 'px', y + 'px)'

;
第一句代码设置元素的旋转角度；第二句话设置元素的坐标位置。以上两句话可以有更好的方式实现，但是在这里暂时不优化。**

4、微信小程序演示