文章目录
- 前言
- 1、html部分
- 2、css部分
- 3、JavaScript部分
- 4、微信小程序演示
前言
哈哈
1、html部分
<div class="great_ultimate_eight_diagrams_box"> <div class="eight_diagrams_box"> <div class="eight_diagrams"> <div class="eight_diagrams_item"> <div class="yin_yang"> <div class="divinatory_direction_box"> <div class="divinatory_name">天乾</div> <div class="direction">正南</div> </div> <div class="yy_box"> <div class="yy_t"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_m"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_b"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> </div> </div> </div> <div class="eight_diagrams_item"> <div class="yin_yang"> <div class="divinatory_direction_box"> <div class="divinatory_name">风巽</div> <div class="direction">西南</div> </div> <div class="yy_box"> <div class="yy_t"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_m"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_b"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> </div> </div> </div> <div class="eight_diagrams_item"> <div class="yin_yang"> <div class="divinatory_direction_box"> <div class="divinatory_name">水坎</div> <div class="direction">正西</div> </div> <div class="yy_box"> <div class="yy_t"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_m"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_b"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> </div> </div> </div> <div class="eight_diagrams_item"> <div class="yin_yang"> <div class="divinatory_direction_box"> <div class="divinatory_name">山艮</div> <div class="direction">西北</div> </div> <div class="yy_box"> <div class="yy_t"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_m"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_b"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> </div> </div> </div> <div class="eight_diagrams_item"> <div class="yin_yang"> <div class="divinatory_direction_box"> <div class="divinatory_name">地坤</div> <div class="direction">正北</div> </div> <div class="yy_box"> <div class="yy_t"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_m"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_b"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> </div> </div> </div> <div class="eight_diagrams_item"> <div class="yin_yang"> <div class="divinatory_direction_box"> <div class="divinatory_name">雷震</div> <div class="direction">东北</div> </div> <div class="yy_box"> <div class="yy_t"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_m"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_b"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> </div> </div> </div> <div class="eight_diagrams_item"> <div class="yin_yang"> <div class="divinatory_direction_box"> <div class="divinatory_name">火离</div> <div class="direction">正东</div> </div> <div class="yy_box"> <div class="yy_t"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_m"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_b"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> </div> </div> </div> <div class="eight_diagrams_item"> <div class="yin_yang"> <div class="divinatory_direction_box"> <div class="divinatory_name">泽兑</div> <div class="direction">东南</div> </div> <div class="yy_box"> <div class="yy_t"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_m"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> <div class="yy_b"> <div style="flex: 3; background-color: #333;"></div> <div style="flex: 1; background-color: #333;"></div> <div style="flex: 3; background-color: #333;"></div> </div> </div> </div> </div> </div> </div> <div class="great_ultimate_box"> <div class="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部分
function init() { 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)';
第一句代码设置元素的旋转角度；第二句话设置元素的坐标位置。以上两句话可以有更好的方式实现，但是在这里暂时不优化。
