<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>八卦图</title>
<style>
/*矩形运动*/
@keyframes gd{
/*25%{transform:translateX(400px) rotate(-360deg);}*/
/*50%{transform:translate(400px,300px) rotate(-760deg);}*/
/*75%{transform:translate(0,300px) rotate(-1080deg);}*/
/*100%{transform:translate(0,0) rotate(-1440deg);}*/
100%{transform:rotate(360deg);}
}
/*绕圆运动*/
@keyframes lb{
100%{transform:rotate(3600deg);}
}
#yin-yang {
margin: 58px;
width: 96px;
height: 48px;
background: #eee;
border-color: #000000;
border-top: #eeeeee;
border-bottom: #000000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
animation:lb 5s linear infinite;
}
/*border-width 简写属性为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。上 右 下 左*/
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: -2px;
background: #eee;
border: 20px solid #000000;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 52%;
background: #000000;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
#mydiv{
width: 500px;
height: 500px;
border: 1px solid #000000;
border-radius: 300px;
animation:gd 5s linear infinite;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="yin-yang"></div>
</div>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>八卦图</title>
<style>
/*矩形运动*/
@keyframes gd{
/*25%{transform:translateX(400px) rotate(-360deg);}*/
/*50%{transform:translate(400px,300px) rotate(-760deg);}*/
/*75%{transform:translate(0,300px) rotate(-1080deg);}*/
/*100%{transform:translate(0,0) rotate(-1440deg);}*/
100%{transform:rotate(360deg);}
}
/*绕圆运动*/
@keyframes lb{
100%{transform:rotate(3600deg);}
}
#yin-yang {
margin: 58px;
width: 96px;
height: 48px;
background: #eee;
border-color: #000000;
border-top: #eeeeee;
border-bottom: #000000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
animation:lb 5s linear infinite;
}
/*border-width 简写属性为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。上 右 下 左*/
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: -2px;
background: #eee;
border: 20px solid #000000;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 52%;
background: #000000;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
#mydiv{
width: 500px;
height: 500px;
border: 1px solid #000000;
border-radius: 300px;
animation:gd 5s linear infinite;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="yin-yang"></div>
</div>
</body>
</html>