当前位置：首页 > CSS

css制作弹球

2026-02-12 21:12:21CSS

使用CSS制作弹球效果

通过CSS动画和关键帧（@keyframes）可以创建简单的弹球效果。以下是实现方法：

创建HTML结构

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

添加基础CSS样式

.ball {
  width: 50px;
  height: 50px;
  background-color: #ff5252;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

实现弹跳动画

@keyframes bounce {
  0% {
    bottom: 0;
    animation-timing-function: ease-out;
  }
  50% {
    bottom: 200px;
    animation-timing-function: ease-in;
  }
  100% {
    bottom: 0;
    animation-timing-function: ease-out;
  }
}

.ball {
  animation: bounce 1s infinite;
}

添加物理效果

通过调整动画时间函数和关键帧位置模拟真实弹跳：

css制作弹球

@keyframes realisticBounce {
  0% {
    bottom: 0;
    animation-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1);
  }
  15% {
    bottom: 300px;
    animation-timing-function: cubic-bezier(0.05, 0, 0.85, 0.05);
  }
  25% {
    bottom: 200px;
  }
  35% {
    bottom: 280px;
  }
  45% {
    bottom: 230px;
  }
  55% {
    bottom: 270px;
  }
  65% {
    bottom: 240px;
  }
  75% {
    bottom: 260px;
  }
  85% {
    bottom: 245px;
  }
  100% {
    bottom: 250px;
  }
}

添加阴影效果增强真实感

.ball::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  bottom: -5px;
  left: 0;
  transform: scaleX(0.8);
  animation: shadow 1s infinite;
}

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

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .ball {
      width: 50px;
      height: 50px;
      background: radial-gradient(circle at 30% 30%, #ff5252, #d50000);
      border-radius: 50%;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      animation: bounce 1s infinite;
      box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.3);
    }

    .ball::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 10px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      bottom: -5px;
      left: 0;
      transform: scaleX(0.8);
      animation: shadow 1s infinite;
    }

    @keyframes bounce {
      0% {
        bottom: 0;
        animation-timing-function: ease-out;
      }
      50% {
        bottom: 200px;
        animation-timing-function: ease-in;
      }
      100% {
        bottom: 0;
        animation-timing-function: ease-out;
      }
    }

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

这个实现包含了基本的弹跳动画、物理效果模拟和视觉增强效果。可以通过调整关键帧百分比、高度值和动画时间函数来改变弹跳的节奏和高度。