<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端页面实现点环绕运动</title>
</head>
<style>
ul#countdown {
text-align: center;
margin: 2em 0 2em;
}
ul#countdown li {
display: inline-block;
margin-right: 28px;
width: 85px;
height: 85px;
text-align: center;
padding: 12px;
border: 1px solid #2be0f0;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
position: relative;
}
ul#countdown li i{
width: 85px;
height: 85px;
position: absolute;
display: block;
/*旋转动画*/
animation:circleRoate 5s infinite linear ;
}
.dotdot{
position: absolute;
left:-2px;
width: 10px;
height: 10px;
border-radius: 50%;
background:#ff6200;
}
@keyframes circleRoate{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
</style>
<body>
<ul id="countdown">
<li>
<i><b class="dotdot" style="background: #00ADEE;"></b></i>
</li>
</ul>
</body>
</html>