<style>
body{margin:0;}
.wrap{
position:relative;
width:200px;
height:100px;
background-color:#fff;
margin:50px auto;
border-width:1px 1px 100px 1px;
border-style: solid;
border-radius: 50%;
animation:rote 2s linear infinite;/*动画名，执行时间*/
}
.wrap:before,
.wrap:after{
content:'';
position: absolute;
top: 50%;
width:20px;
height:20px;
border-radius:50%;
}
.wrap:before{
left: 0;
background-color: #fff;
border:40px solid #000;
}
.wrap:after{
right: 0;
background-color: #000;
border:40px solid #fff;
}
@keyframes rote{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.wrap:hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
