八卦图绕矩形旋转移动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
@keyframes bagua{
25%{transform:translate(500px) rotate(360deg);}
50%{transform:translate(500px,500px) rotate(720deg);}
75%{transform:translate(0,500px) rotate(1080deg);}
100%{transform:translate(0,0) rotate(1440deg);}
}
@-webkit-keyframes bagua{
25%{transform:translate(500px) rotate(360deg);}
50%{transform:translate(500px,500px) rotate(720deg);}
75%{transform:translate(0,500px) rotate(1080deg);}
100%{transform:translate(0,0) rotate(1440deg);}
}
#div {
width: 96px;
height: 48px;
background: white;
border-color: #000000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
animation:bagua 8s;
-webkit-animation:bagua 8s ease 1s 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;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="div">
</div>
</div>
</body>
</html>
