当前位置：首页 > CSS

css动画制作弹球

2026-02-13 07:57:45CSS

使用CSS动画制作弹球效果

通过CSS的@keyframes和animation属性可以模拟弹球运动效果，结合transform和transition实现物理反弹动画。

HTML结构

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

基础CSS样式

.container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  position: relative;
  overflow: hidden;
}

.ball {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 30% 30%, #ff0000, #800000);
  border-radius: 50%;
  position: absolute;
}

垂直弹跳动画

通过关键帧定义Y轴位移和缩放效果模拟重力加速度：

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

@keyframes bounce {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  25% {
    transform: translateY(250px) scale(1.1, 0.8);
  }
  50% {
    transform: translateY(150px) scale(0.9, 1.1);
  }
  75% {
    transform: translateY(250px) scale(1.05, 0.9);
  }
  100% {
    transform: translateY(200px) scale(1, 1);
  }
}

水平移动的弹球

增加X轴位移实现斜向弹跳：

@keyframes moveBounce {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100px, 150px) scale(1.1, 0.8);
  }
  50% {
    transform: translate(200px, 50px) scale(0.9, 1.1);
  }
  75% {
    transform: translate(250px, 150px) scale(1.05, 0.9);
  }
  100% {
    transform: translate(300px, 100px);
  }
}

添加阴影增强立体感

通过伪元素创建动态阴影：

.ball::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 15px;
  width: 20px;
  height: 5px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  animation: shadow 1.5s infinite;
}

@keyframes shadow {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.5); opacity: 0.3; }
  100% { transform: scale(1); opacity: 0.7; }
}

使用CSS变量控制参数

通过变量方便调整动画参数：

:root {
  --ball-size: 50px;
  --bounce-height: 250px;
  --animation-duration: 1.2s;
}

.ball {
  width: var(--ball-size);
  height: var(--ball-size);
  animation-duration: var(--animation-duration);
}

以上代码组合后可实现具有物理感的弹球动画效果，通过调整关键帧百分比和cubic-bezier函数可以改变弹跳节奏。实际应用中可能需要根据容器尺寸微调位移数值。

css动画制作弹球