利用css3的animation实现的小球沿着椭圆轨道进行圆周运动，并且实现了近大远小的代码：
css3代码：
.area{
width: 1200px;
height: 800px;
background: green;
}
.area>.ball{
width: 60px;
height: 60px;
position: absolute;
border-radius: 60px;
background-image: linear-gradient(to top,blue,lightblue);
box-shadow: 0px 0px 20px #0000ff5c;
}
/* 6个球 总共运行一圈的时间为24秒 每个球的间隔时间为 4秒*/
.area>.ball1{
animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -6s infinite alternate,
anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) 0s infinite alternate,
scale 24s cubic-bezier(0.6,0.3,0.3,0.6) 0s infinite alternate;
}
.area>.ball2{
animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -10s infinite alternate,
anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) -4s infinite alternate,
scale 24s cubic-bezier(0.6,0.3,0.3,0.6) -4s infinite alternate;
}
.area>.ball3{
animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -14s infinite alternate,
anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) -8s infinite alternate,
scale 24s cubic-bezier(0.6,0.3,0.3,0.6) -8s infinite alternate;
}
.area>.ball4{
animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -18s infinite alternate,
anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) -12s infinite alternate,
scale 24s cubic-bezier(0.6,0.3,0.3,0.6) -12s infinite alternate;
}
.area>.ball5{
animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -22s infinite alternate,
anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) -16s infinite alternate,
scale 24s cubic-bezier(0.6,0.3,0.3,0.6) -16s infinite alternate;
}
.area>.ball6{
animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -26s infinite alternate,
anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) -20s infinite alternate,
scale 24s cubic-bezier(0.6,0.3,0.3,0.6) -20s infinite alternate;
}
/* 动画 */
/* 在X轴上的移动 */
@keyframes anmiteX{
from{
left: 100px;
}
to{
left: 1000px;
}
}
/* 在轴上Y的移动 */
@keyframes anmiteY{
from{
top: 100px;
}
to{
top: 600px;
}
}
/* 对球进行放大和缩小在视觉上进行远近的模拟 */
@keyframes scale{
0%{
transform: scale(0.7,0.7);
}
50%{
transform: scale(1.2,1.2);
}
100%{
transform: scale(0.7,0.7);
}
}html代码：
<div class="area"> <div class="ball ball1"></div> <div class="ball ball2"></div> <div class="ball ball3"></div> <div class="ball ball4"></div> <div class="ball ball5"></div> <div class="ball ball6"></div> </div>