web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation
文章目录
- 前言
- 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)';
第一句代码设置元素的旋转角度；第二句话设置元素的坐标位置。以上两句话可以有更好的方式实现，但是在这里暂时不优化。
