html代码：
<body>
<div id=yinyang></div>
<p>道生一，一生二，二生三，三生万物</p>
</body>
css代码：
body{
background:#444;
}
@keyframes spin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
#yinyang{
width:200px;
height:200px;
border-radius:50%;
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);
position:relative;
margin:100px auto 30px;
animation-name:spin;
animation-duration:1s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
#yinyang::before{
content:'';
width:20px;
height:20px;
border-radius:50%;
background:#fff;
position:absolute;
top:50px;
left:0;
border:40px solid black;
}
#yinyang::after{
content:'';
width:20px;
height:20px;
border-radius:50%;
background:#000;
position:absolute;
top:50px;
right:0;
border:40px solid white;
}
p{
color:#fff;
text-align:center;
}
输出样式：
太极阴阳图.PNG
网友评论