当前位置：首页 > CSS

css制作小球动画

2026-02-13 10:44:35CSS

使用CSS制作小球动画

CSS动画可以通过@keyframes和animation属性实现小球动画效果。以下是几种常见的小球动画实现方式：

基础弹跳动画

通过@keyframes定义小球的弹跳轨迹，结合transform和animation实现上下弹跳效果：

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff5722;
  position: relative;
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}

左右移动动画

实现小球左右移动并改变颜色的动画效果：

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #4caf50;
  position: relative;
  animation: moveAndChange 3s infinite;
}

@keyframes moveAndChange {
  0% {
    transform: translateX(0);
    background-color: #4caf50;
  }
  50% {
    transform: translateX(200px);
    background-color: #2196f3;
  }
  100% {
    transform: translateX(0);
    background-color: #4caf50;
  }
}

3D弹跳效果

添加阴影和缩放效果模拟3D弹跳：

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ff5722);
  position: relative;
  animation: bounce3D 0.8s infinite alternate;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

@keyframes bounce3D {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  }
  100% {
    transform: translateY(-100px) scale(1.1);
    box-shadow: 0 15px 25px rgba(0,0,0,0.3);
  }
}

抛物线运动

结合X轴和Y轴移动模拟抛物线：

.ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e91e63;
  position: absolute;
  animation: parabola 2s infinite;
}

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

多小球动画

创建多个小球不同步动画：

.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
}

.ball1 {
  background-color: #ff5722;
  animation: bounce1 1s infinite alternate;
}

.ball2 {
  background-color: #4caf50;
  animation: bounce2 1.2s infinite alternate 0.2s;
}

@keyframes bounce1 {
  to {
    transform: translateY(-80px);
  }
}

@keyframes bounce2 {
  to {
    transform: translateY(-100px);
  }
}

这些示例展示了CSS实现小球动画的基本方法，可以根据需要调整动画参数如持续时间、延迟、重复次数等属性。通过组合不同的变换和关键帧，可以创建更复杂的小球动画效果。

css制作小球动画