当前位置：首页 > CSS

css动画制作弹球

2026-04-01 16:48:19CSS

使用CSS动画制作弹球效果

弹球动画可以通过CSS的@keyframes和animation属性实现。以下是具体实现方法：

基础弹球动画

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

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff5722;
  position: absolute;
  animation: bounce 2s infinite cubic-bezier(0.5, 0.05, 1, 0.5);
}

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

添加弹跳效果

通过调整cubic-bezier函数和关键帧百分比，可以创建更真实的弹跳效果：

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

水平移动的弹球

让弹球在水平方向移动的同时弹跳：

.ball {
  animation: bounce 2s infinite, move 4s infinite linear;
}

@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: calc(100% - 50px);
  }
}

添加阴影效果

弹球落地时阴影变小，弹起时阴影变大：

.ball {
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.shadow {
  width: 40px;
  height: 10px;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  animation: shadow 2s infinite;
}

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

多球碰撞效果

创建多个弹球并设置不同动画延迟：

.ball1 {
  animation-delay: 0s;
}
.ball2 {
  animation-delay: 0.5s;
}
.ball3 {
  animation-delay: 1s;
}

3D弹跳效果

通过CSS 3D变换增加深度感：

css动画制作弹球

@keyframes bounce {
  0% {
    transform: translateY(0) rotateX(0);
  }
  50% {
    transform: translateY(300px) rotateX(180deg);
  }
  100% {
    transform: translateY(0) rotateX(360deg);
  }
}

以上代码可以组合使用，根据需求调整参数如动画持续时间、弹跳高度、颜色等，创建出各种弹球动画效果。