css制作弹跳球

2026-03-11 20:57:45CSS

使用CSS动画制作弹跳球

创建一个弹跳球效果可以通过CSS的animation和keyframes实现。以下是一个完整的实现方法：

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.1, 0.9);
  }
  100% {
    top: 0;
    transform: scale(1, 1);
  }
}

添加弹性效果

为了让弹跳更真实，可以调整动画的时间函数和缩放效果：

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

@keyframes bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(150px) scale(1.1, 0.8);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

添加阴影效果

为增强立体感，可以添加随球体移动的阴影：

.ball-container {
  position: relative;
  height: 250px;
}

.ball {
  /* 球体样式同上 */
}

.shadow {
  width: 40px;
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: shadow 0.6s cubic-bezier(0.5, 0.05, 0.5, 1) infinite;
}

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

使用CSS变量控制参数

为方便调整，可以使用CSS变量：

css制作弹跳球

:root {
  --ball-size: 50px;
  --bounce-height: 150px;
  --animation-duration: 0.6s;
}

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

@keyframes bounce {
  50% {
    transform: translateY(var(--bounce-height)) scale(1.1, 0.8);
  }
}

这些方法组合起来可以创建出逼真的弹跳球效果，通过调整动画时间、缓动函数和变形参数，可以获得不同的弹跳质感。

标签: css