<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.