使用css的动画变换效果完成“ 旋转太极“。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;background-color: antiquewhite;}.tj{width: 0;height: 300px;/* border: 1px solid red; */border-left: 150px solid #000000;border-right: 150px solid #FFFFFF;border-radius: 50%;animation: myAnimation 3s linear 0s infinite;}@keyframes myAnimation {from{transform: rotate(0deg);}to{transform: rotate(360deg);}}.tj::before , .tj::after{display: block;content: "";background: white;height: 50px;width: 50px;border-radius: 50%;border: 50px solid black;margin-left: -72px;}.tj::after {background: black;border: 50px solid white;}</style></head><body><div class="tj"></div></body>
</html>实现效果：
