效果图:click here
代码:纯css实现
<!-- html代码 -->
<div class='box_taiji'></div>
/* css代码 */
body{background:#cfcfcf}
.box_taiji{
width:0;
height:400px;
border-left:200px solid #000;
border-right:200px solid #FFF;
border-radius:50%;
animation: move 1s linear infinite;
}
.box_taiji:after,.box_taiji:before{
position:absolute;content:'';display:block;
}
.box_taiji:before{
width:200px;
height:200px;
top:0;
left:-100px
z-index:1;
background-color:#fff;
border-radius:50%;
box-shadow:0 200px 0 #000;
}
.box_taiji:after{
width:60px;
height:60px;
border-radius:50%;
top:70px;
left:-30px;
z-index:2;
background-color:#000;
box-shadow:0 200px 0 #fff
}
@keyframs move{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}