CSS 小球随着椭圆移动
html代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="background-img"><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 class="ball ball7"></div><div class="ball ball8"></div></div>
</div>
</body>
</html>css代码：
.background-img {height: 32vw;width: 60%;margin-top: 1vw;text-align: center;
}.area {width: 100%;height: 100%;position: relative;
}.area:hover>.ball {animation-play-state: paused;
}.area>.ball {width: 7.0313vw;height: 7.0313vw;position: absolute;border-radius: 7.0313vw;background-image: linear-gradient(to top, #051F56, #1B8EF8);color: #E1EAFE;
}.area>.ball1 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate;
}.area>.ball2 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.5s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.5s infinite alternate;
}.area>.ball3 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate;
}.area>.ball4 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate;
}.area>.ball5 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate;
}.area>.ball6 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate;
}.area>.ball7 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -20s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate;
}.area>.ball8 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -22.5s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate;
}/* 动画 *//* 在X轴上的移动 */
@keyframes anmiteX {from {left: 56vw;}to {left: -1vw;}
}/* 在轴上Y的移动 */
@keyframes anmiteY {from {top: 7vw;}to {top: 28vw;}
}/* 对球进行放大和缩小在视觉上进行远近的模拟 */
@keyframes scale {0% {transform: scale(0.8, 0.8);opacity: 0.5;}50% {transform: scale(1.3, 1.3);opacity: 1;}100% {transform: scale(0.8, 0.8);opacity: 0.5;}
}