当前位置：首页 > CSS

css动画制作弹球

2026-03-11 20:43:35CSS

CSS动画制作弹球效果

弹球动画可以通过CSS的@keyframes和animation属性实现，结合物理运动轨迹（如抛物线或弹性效果）模拟真实弹跳。

基础弹跳动画

定义一个球体元素并添加垂直弹跳动画：

css动画制作弹球

<div class="ball"></div>

.ball {
  width: 50px;
  height: 50px;
  background: #ff5252;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from { bottom: 0; }
  to { bottom: 200px; }
}

添加缓动效果

使用cubic-bezier函数模拟重力加速度：

.ball {
  animation: bounce 1s cubic-bezier(0.5, 0.05, 0.5, 1) infinite;
}

完整抛物线弹跳

结合水平移动和垂直弹跳：

css动画制作弹球

@keyframes bounce {
  0% { 
    bottom: 0;
    left: 0;
    animation-timing-function: ease-out;
  }
  50% {
    bottom: 200px;
    left: 100px;
    animation-timing-function: ease-in;
  }
  100% {
    bottom: 0;
    left: 200px;
  }
}

墙壁碰撞效果

通过transform: scale模拟撞击时的形变：

@keyframes bounce {
  0%, 100% {
    transform: translateX(0) scale(1, 1);
  }
  25% {
    transform: translateX(100px) scale(0.9, 1.1);
  }
  75% {
    transform: translateX(-100px) scale(0.9, 1.1);
  }
}

多方向弹跳

使用多个关键帧实现复杂轨迹：

@keyframes crazyBounce {
  0% { top: 10%; left: 10%; }
  20% { top: 50%; left: 30%; }
  40% { top: 20%; left: 80%; }
  60% { top: 70%; left: 60%; }
  80% { top: 40%; left: 40%; }
  100% { top: 10%; left: 10%; }
}