css制作小球动画

使用 CSS 制作小球动画

关键帧动画（@keyframes）

通过 @keyframes 定义小球的运动轨迹，结合 transform 和 animation 属性实现动画效果。

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

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
}

弹性效果（贝塞尔曲线）

通过 animation-timing-function 调整动画的缓动效果，模拟真实弹跳。

.ball {
  animation-timing-function: cubic-bezier(0.5, 0.05, 0.1, 0.3);
}

多方向运动

结合 translateX 和 translateY 实现斜向弹跳。

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

3D 旋转效果

添加 rotate 属性让小球在运动时旋转。

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.ball {
  animation: spin 1s linear infinite;
}

阴影增强立体感

通过 box-shadow 动态变化模拟光照效果。

@keyframes shadow {
  0% {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
}

组合动画

将多个动画效果通过逗号分隔同时应用。

.ball {
  animation: 
    bounce 2s ease-in-out infinite,
    spin 1s linear infinite;
}

响应式尺寸

使用 vw/vh 单位让小球适应不同屏幕。

.ball {
  width: 5vw;
  height: 5vw;
}