利用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>