css制作弹球

CSS 制作弹球的方法

使用 CSS 动画和关键帧

通过 @keyframes 定义弹球的运动轨迹，结合 transform 和 animation 属性实现弹跳效果。

.ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  animation: bounce 2s infinite;
}

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

添加物理效果

通过调整 animation-timing-function 模拟重力加速度，使弹球更逼真。

.ball {
  animation-timing-function: cubic-bezier(0.5, 0.05, 0.1, 0.3);
}

结合 HTML 结构

将 CSS 应用于 HTML 元素，确保弹球显示在页面中。

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

多方向弹跳

扩展 @keyframes 实现水平与垂直方向的复合弹跳。

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

阴影效果

通过 box-shadow 或伪元素增强弹球的立体感。

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

响应式设计

使用 vw 或 vh 单位确保弹球在不同屏幕尺寸下比例一致。

.ball {
  width: 5vw;
  height: 5vw;
}