[分享]css中封装小球运动怎么写

CSS中封装小球运动是一种常见的动画效果，可以为网站增添活力，提高用户体验。以下是一个简单的实现方式。

.ball {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f00;
  animation: move 2s infinite ease-in-out;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(200px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
} 

首先，我们定义了一个类名为.ball的元素，它被设置为绝对定位，并且具有宽度、高度和圆角，其背景色为红色。接着，我们为这个元素添加了一个动画属性，指定了运动时间、循环次数和动画曲线。

而关键帧动画是通过@keyframes关键字定义的，在这个例子中，我们将小球分为三段运动，从起始位置往右移200像素再返回到起始位置，然后不断循环运动。通过transform属性的translate函数实现元素的位移，具体用法是translate(x,y)，其中x和y分别表示水平和垂直方向的移动距离。

以上就是CSS中封装小球运动的实现方法，通过简单的代码就可以在网站中加入动态效果，提升用户体验。