太极图可以理解为一个一半黑一半白的半圆，上面放置着两个圆形，一个黑色边框白色芯，一个白色边框黑色芯。
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>