css3四个圆绕球体运动 |borderlayout css

.ball {
width: 50px;
height: 50px;
background: #ffcc00;
position: absolute;
border-radius: 50%;
animation: orbit 5s linear infinite;
}
.ball1 {
top: 250px;
left: 200px;
animation-delay: 0s;
}
.ball2 {
top: 250px;
left: 450px;
animation-delay: 1.5s;
}
.ball3 {
top: 500px;
left: 200px;
animation-delay: 3s;
}
.ball4 {
top: 500px;
left: 450px;
animation-delay: 4.5s;
}
@keyframes orbit {
0% {
transform: rotate(0) translateX(230px) rotate(0);
}
100% {
transform: rotate(360deg) translateX(230px) rotate(-360deg);
}
}

代码中使用了四个圆形元素（.ball1、.ball2、.ball3、.ball4），它们分别运动在页面的不同位置。通过在关键帧（@keyframes）中旋转和移动球体，大家可以实现球体围绕中心点旋转的效果。

通过这个特效，大家在设计网站时可以增加更多交互元素，提高用户体验。同时，学习CSS3动画的实现也可以让大家更好地理解CSS3的特性及其使用方法。