这类的东西网上一搜就是大把的，看着比较空旷的博客，所以自己也来写一个。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#yin-yang{
position: absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
/*上面一段代码是垂直居中定位*/
width:192px;
height:96px;
background-color:white ;
border-color: black;
border-style: solid;
border-width: 2px 2px 98px 2px;
border-radius: 100%;
animation-name: turn; /*动画名称*/
animation-delay: 1s; /*动画延迟时间*/
animation-direction: normal; /*动画效果有反复交递等*/
animation-duration: 1s; /*动画执行时间*/
animation-timing-function: linear; /*动画执行方法此为匀速方法*/
animation-iteration-count: infinite; /*执行动画的次数此为无限次数*/
}
#yin-yang:before{
content:'';
position: absolute;
top:50%;
left:0;
width:24px;
height:24px;
background-color: white;
border:36px solid black;
border-radius: 100%;
}
#yin-yang:after{
content:'';
position: absolute;
top:50%;
right: 0;
width:24px;
height:24px;
background-color: black;
border:36px solid white;
border-radius: 100%;
}
@keyframes turn{
0{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
</style>
</head>
<body>
<div id="yin-yang"></div>
</body>
</html>