Css-伪类_太极
原理：利用css的before和after这2个属性值来实现画出太极，然后定义动画，最后用animation绑定动画，实现效果。
Demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Css-伪类_太极</title>
<style type="text/css">
@keyframes xuanzhuan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@-webkit-keyframes xuanzhuan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
#yin-yang {
width: 96px;
height: 48px;
background: #fff;
border-color: black;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
transform: rotate(-90deg);
animation: xuanzhuan 3s linear 0s infinite;
-webkit-animation: xuanzhuan 3s linear 0s infinite;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid black;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: black;
border: 18px solid #fff;
border-radius:100%;
width: 12px;
height: 12px;
}
@keyframes boxxz{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.box{width: 200px;height: 200px;border-radius: 100px;border: 3px solid slateblue;border-top:0;border-left: 0;border-bottom:0;animation: boxxz 2s linear 0s infinite;}
.box:after{content:"";width: 180px;height: 180px;background: seashell;}
</style>
</head>
<body>
<div class="containar" id="yin-yang">
</div>
<div class="box"></div>
</body>
</html>
效果图：
