css制作弹球

2026-02-27 05:48:56CSS

使用CSS制作弹球效果

通过CSS动画和关键帧可以实现弹球效果。以下是一个简单的实现方法：

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

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

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

添加物理效果

为了更真实的弹球效果，可以调整动画的时间函数和关键帧：

.ball {
  /* 其他样式不变 */
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translateY(300px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
}

多方向弹跳

实现斜向弹跳效果：

.ball {
  /* 其他样式不变 */
  animation: diagonalBounce 3s infinite;
}

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

添加阴影效果

增强立体感：

.ball {
  /* 其他样式不变 */
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  }
  50% {
    transform: translateY(200px);
    box-shadow: 0 40px 30px rgba(0,0,0,0.1);
  }
}

响应式弹球

根据容器大小自动调整弹跳高度：

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

.ball {
  /* 其他样式不变 */
  animation: responsiveBounce 2s infinite;
}

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

这些方法可以组合使用，创建出各种不同效果的CSS弹球动画。调整动画持续时间、关键帧位置和时间函数可以获得不同的弹跳感觉。

css制作弹球