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
