当前位置：首页 > CSS

css制作弹跳球

2026-02-13 08:11:44CSS

使用CSS动画制作弹跳球效果

通过CSS的@keyframes和animation属性可以模拟弹跳球的物理效果，结合缓动函数（如cubic-bezier）调整动画节奏。

HTML结构

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

CSS样式与动画

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ff5e5e, #d00000);
  position: relative;
  animation: bounce 1.5s infinite cubic-bezier(0.5, 0.05, 0.8, 0.3);
}

@keyframes bounce {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-150px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
}

添加阴影增强真实感

通过阴影大小和模糊度的变化模拟球体与地面的接触效果：

.ball::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 25%;
  width: 50%;
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  filter: blur(5px);
  animation: shadow 1.5s infinite;
}

@keyframes shadow {
  0%, 100% {
    transform: scaleX(1.5);
    opacity: 0.3;
  }
  50% {
    transform: scaleX(0.8);
    opacity: 0.1;
  }
}

弹性变形效果

在球体接触地面时添加轻微的水平拉伸变形：

@keyframes bounce {
  /* 原有代码... */
  15%, 85% {
    transform: translateY(0) scaleX(1.05) scaleY(0.95);
  }
}

性能优化建议

使用will-change属性提前告知浏览器需要优化的属性：

.ball {
  will-change: transform, filter;
}

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #f0f0f0;
    }

    .ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(to bottom, #ff5e5e, #d00000);
      position: relative;
      animation: bounce 1.5s infinite cubic-bezier(0.5, 0.05, 0.8, 0.3);
      will-change: transform;
    }

    @keyframes bounce {
      0% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      15%, 85% {
        transform: translateY(0) scaleX(1.05) scaleY(0.95);
      }
      50% {
        transform: translateY(-150px);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
      100% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
    }

    .ball::before {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 25%;
      width: 50%;
      height: 10px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      filter: blur(5px);
      animation: shadow 1.5s infinite;
    }

    @keyframes shadow {
      0%, 100% {
        transform: scaleX(1.5);
        opacity: 0.3;
      }
      50% {
        transform: scaleX(0.8);
        opacity: 0.1;
      }
    }
  </style>
</head>
<body>
  <div class="ball"></div>
</body>
</html>

css制作弹跳球