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(to right,black 50%, white 50%);
}
.taiji::before,.taiji::after{
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius:50%;
left:50%;
transform: translateX(-50%);
}
.taiji::before{
background-color: white;
border: 60px solid black;
top: 0;
}
.taiji::after{
background-color: black;
border: 60px solid white;
bottom: 0;
}
效果图
2、旁边线条的描绘
html部分
<div id="taiji">
<div class="line tian">
<div class="quan"></div>
<div class="quan"></div>
<div class="quan"></div>
</div>
</div>
css部分
.quan{
height: 10px;
width: 80px;
background-color: #000000;
margin: 10px auto;
}
.que{
display: flex;
width: 80px;
margin: 10px auto;
}
.que1,.que2{
height: 10px;
width: 35px;
background-color: #000000;
}
.que2{
margin-left: 10px;
}
.line{
/* position: absolute; */
width: inherit;
height: inherit;
transform-origin: 50% 50%;
/* transform: rotate(30deg); */
transition: all .6s;
position: absolute;
}
效果图
3、完整代码
使用js简化后的代码如下：
html部分
<body>
<div id="taiji">
</div>
</body>
css部分
body{
background:rgba(128,128,128,.2);
}
#taiji{
margin: 50px auto;
width: 600px;
height: 600px;
animation: rotate 3s linear infinite;
animation-play-state: paused;
}
.taiji{
width: 300px;
height: 300px;
border-radius: 50%;
position: relative;
margin: 200px auto;
top:150px;
background-image: linear-gradient(to right,black 50%, white 50%);
}
.taiji::before,.taiji::after{
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius:50%;
left:50%;
transform: translateX(-50%);
}
.taiji::before{
background-color: white;
border: 60px solid black;
top: 0;
}
.taiji::after{
background-color: black;
border: 60px solid white;
bottom: 0;
}
.line{
width: inherit;
height: inherit;
transform-origin:50% 50%;
transition: all 0s;
position: absolute;
}
.line1{
height: 10px;
width: 80px;
background-color: #000000;
margin: 10px auto;
}
.line2{
display: flex;
width: 80px;
margin: 10px auto;
}
.line3,.line4{
height: 10px;
width: 35px;
background-color: #000000;
}
.line4{
margin-left: 10px;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
#taiji:hover{
animation-play-state: running;
}
javaScript部分
var m = document.getElementById('taiji'),
lineLists = ",2,02,12,012,01,1,0";
lineLists = lineLists.split(',');
//四周的黑线
for(let i = 0; i < 8; i++){
var newNode = document.createElement("div");
newNode.classList.add("line");
for(let j = 0; j < 3; j++){
let child = document.createElement("div");
if(lineLists[i].indexOf(j) != -1){
let c1 = document.createElement("div"),
c2 = document.createElement("div");
child.classList.add("line2");
c1.classList.add("line3");
c2.classList.add("line4");
child.appendChild(c1);
child.appendChild(c2);
}else{
child.classList.add("line1");
}
newNode.appendChild(child);
}
newNode.style.transform = `rotate(${
i*45}deg)`;
m.appendChild(newNode);
}
//太极图中间部分
var newNode = document.createElement("div");
newNode.classList.add("taiji");
m.appendChild(newNode);
GitHub：https://github.com/yongtaozheng/html-css-js-Achieve-cool-results.git