当前位置：首页 > CSS

css制作弹跳球

2026-01-28 13:52:49CSS

使用CSS动画制作弹跳球

创建一个弹跳球效果可以通过CSS的@keyframes动画和transform属性实现。以下是一个完整的实现方法：

HTML结构

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

CSS样式

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

@keyframes bounce {
  0% {
    top: 0;
    transform: scale(1, 1);
  }
  50% {
    top: 200px;
    transform: scale(1.2, 0.8);
  }
  100% {
    top: 0;
    transform: scale(1, 1);
  }
}

添加物理弹跳效果

为了使弹跳更逼真，可以调整动画的timing-function：

.ball {
  /* 其他样式保持不变 */
  animation: bounce 1s cubic-bezier(0.5, 0.05, 0.5, 1) infinite;
}

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

添加阴影效果

配合弹跳动作添加阴影变化：

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

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

多阶段弹跳动画

实现逐渐减弱的弹跳效果：

css制作弹跳球

@keyframes multiBounce {
  0% { transform: translateY(0); }
  20% { transform: translateY(-200px); }
  40% { transform: translateY(-100px); }
  60% { transform: translateY(-50px); }
  80% { transform: translateY(-25px); }
  100% { transform: translateY(0); }
}

.ball {
  animation: multiBounce 2s infinite;
}

这些方法可以根据需要组合使用，调整参数如持续时间、弹跳高度和缓动函数可以获得不同的弹跳效果。

标签: css