<div class="ellips">
<div class="dot"></div>
</div>
@a : 160px; // 椭圆x轴半径(长半径)
@b : 80px; // 椭圆y轴半径(短半径)
@s : 40; // 坐标点的数目(数目越大,动画越精细)
.ellips{
width: @a*2 ;
height: @b*2;
border-radius: 100%;
border: 1px solid #333;
position: relative;
margin: 30px 0 0 20px;
}
.dot{
width: 20px;
height: 20px;
left: @a - 10px;
top: @b - 10px;
background: red;
border-radius: 100%;
position: absolute;
animation: move 10s linear infinite;
}
.loop(@index) when (@index < @s+1) {
.loop((@index + 1));
@keyframeSel: @index * 100%/@s;
@{keyframeSel}{ transform: translate(@a*cos(360deg/@s*@index),@b*sin(360deg/@s*@index),);}
}
@keyframes move{
.loop(0);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.