Css-伪类_太极
原理:利用css的before和after这2个属性值来实现画出太极,然后定义动画,最后用animation绑定动画,实现效果。
Demo:
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;}
效果图: