当前位置：首页 > CSS

css制作小球动画

2026-04-01 19:41:03CSS

CSS 制作小球动画的方法

基础弹跳动画

使用 @keyframes 定义弹跳动画，结合 transform 和 animation 属性实现垂直弹跳效果：

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(to right, #ff758c, #ff7eb3);
  animation: bounce 1s infinite alternate;
}

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

物理感弹跳

通过多关键帧模拟真实弹跳轨迹，加入缓动函数增强物理感：

css制作小球动画

@keyframes physics-bounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-100px); }
  50% { transform: translateY(0); }
  65% { transform: translateY(-50px); }
  80% { transform: translateY(0); }
  90% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.ball {
  animation: physics-bounce 1.5s ease-in-out infinite;
}

3D 空间弹跳

添加 perspective 和 rotateX 创造立体感：

.container {
  perspective: 500px;
}

.ball {
  transform-style: preserve-3d;
  animation: 
    bounce 1s infinite alternate,
    rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotateX(0); }
  to { transform: rotateX(360deg); }
}

光影变化增强

配合 box-shadow 和 opacity 实现光影变化：

css制作小球动画

@keyframes glow {
  0% { 
    box-shadow: 0 0 10px #ff758c;
    opacity: 0.9;
  }
  100% { 
    box-shadow: 0 0 30px #ff7eb3;
    opacity: 1;
  }
}

.ball {
  animation: glow 1s ease-in-out infinite alternate;
}

路径动画

使用 offset-path 让小球沿自定义路径运动（需浏览器支持）：

.ball {
  offset-path: path('M 0 0 Q 100 100 200 0');
  animation: move 3s infinite;
}

@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

组合动画示例

整合多种效果的完整示例：

.ball {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ff7eb3);
  box-shadow: 0 0 20px rgba(255,117,140,0.6);

  animation: 
    combo-bounce 2s cubic-bezier(0.5, 0.05, 0.5, 1) infinite,
    glow-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes combo-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-150px) scale(1.1, 0.9); }
  60% { transform: translateY(0) scale(0.95, 1.05); }
}

@keyframes glow-pulse {
  from { filter: brightness(90%); }
  to { filter: brightness(110%); }
}