太極圖可以理解為一個一半黑一半白的半圓，上面放置着兩個圓形，一個黑色邊框白色芯，一個白色邊框黑色芯。
1、實現黑白各半的圓形。
.box{ width:200px;height:200px; border-radius:50%; background:linear-gradient(90deg,black 50%,white 50%); margin:50px auto;position:relative;
}
2、用：before偽類實現一個黑色邊框白色芯的園。
.box:before{ content:" "; position:absolute; width:0px;height:0px; padding:25px; border:25px solid black; border-radius: 50%; background:white; left:50px;
}
3、用：after偽類實現一個白色邊框黑色芯的圓。
.box:after{ content:" "; width:0px;height:0px; padding:25px; border:25px solid white; border-radius: 50%; background:black; position: absolute; left:50px;top:100px;
}
CSS實現旋轉太極圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>太極圖</title>
<style> *{ margin:0;padding:0;
} body{ background: #eee } .box{ width:200px;height:200px; border-radius:50%; background: linear-gradient(90deg,black 50%,white 50%); margin:50px auto; position:relative; animation: tj 3s infinite linear ;} .box:before{ content:" "; position:absolute; width:0px; height:0px; padding:25px; border:25px solid black; border-radius: 50%; background:white; left:50px;
} .box:after{ content:" "; width:0px;height:0px; padding:25px; border:25px solid white; border-radius: 50%; background:black; position: absolute; left:50px;top:100px;
} @keyframes tj{ from {transform:rotate(0deg);} to{transform:rotate(360deg);} } </style>
</head>
<body>
<div class="box"></div>
</body>
</html>
JS實現旋轉太極圖（鼠標懸停轉動，移開停止旋轉效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>太極圖</title>
<style> *{ padding: 0; margin: 0;
} body{ background: #eee } .tjt{ width:200px;height:200px; border-radius:50%; background: linear-gradient(90deg,black 50%,white 50%); margin:50px auto; position:relative;
} .tjt:before{ content:" "; position:absolute; width:0px; height:0px; padding:25px; border:25px solid black; border-radius: 50%; background:white; left:50px;
} .tjt:after{ content:" "; width:0px;height:0px; padding:25px; border:25px solid white; border-radius: 50%; background:black; position: absolute; left:50px;top:100px;
}
</style>
</head>
<body>
<div id="tj" class="tjt" onmouseover="xz()" onmouseout="clearInterval(zh)"></div>
<script>
var x=0; var zh; function xz(){ clearInterval(zh) zh=setInterval(function(){ x=x+1; document.getElementById("tj").style.transform='rotate(' + x + 'deg)'; },10) } </script>
</body>
</html>