<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
//动画旋转
@keyframes bagua{
100%{transform:rotate(1080deg)}
}
//适配浏览器
@-webkit-keyframes bagua{
100%{transform:rotate(1080deg)}
}
#div {
width: 96px;
height: 48px;
background: white;
border-color: #000000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
left:130px;
top:30px;
transform-origin:150px 260px;
animation:bagua 8s;
-webkit-animation:bagua 8s liner infinite normal;
}
#div:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: white;
border: 18px solid black;
border-radius: 100%;
width: 12px;
height: 12px;
}
#div:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #000000;
border: 18px solid white;
border-radius:100%;
width: 12px;
height: 12px;
}
#mydiv{
width:600px;
height: 600px;
border:1px solid gray;
border-radius: 50%;
/* animation:bagua 8s;
-webkit-animation:bagua 8s liner infinite normal ;*/
}
</style>
</head>
<body>
<div id="mydiv">
<div id="div">
</div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/223y/p/5747416.html