1.通过border-radius画出圆
2.animation动画
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>圆的转动</title>
<style>#test {
height:10px;
width:10px;
position:absolute;
background-color:#0CF;
border-radius:50%;
top:0px;
left:10px;
margin:5px;
}
#rond {
height:100px;
width:100px;
border:1px solid #0CF;
border-radius:50%;
position:absolute;
top:20px;
left:15px;
animation:rond 3s infinite;
-webkit-animation:rond 3s infinite;
}
@keyframes rond {
0% {transform : rotate(0deg);}
100% {transform : rotate(360deg);}
}
@-webkit-keyframes rond {
0%{-webkit-transform : rotate(0deg);}
100%{-webkit-transform : rotate(360deg);}
}</style>
</head>
<body>
<div id="rond">
<div id="test"></div>
</div>
</div>
</body>
</html>
