当前位置：首页 > CSS

css制作小球动画

2026-03-11 23:32:10CSS

使用 CSS 制作小球动画

关键帧动画（@keyframes）

通过 @keyframes 定义动画的关键帧，控制小球的位置、颜色或大小变化：

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

小球基础样式

创建圆形小球并应用动画：

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff6b6b;
  animation: bounce 2s infinite ease-in-out;
}

添加物理效果

通过调整 animation-timing-function 模拟弹跳的物理效果：

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

多方向运动

结合 X 轴和 Y 轴移动实现斜向弹跳：

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

阴影增强立体感

为小球添加动态阴影效果：

@keyframes shadow {
  0% { box-shadow: 0 0 10px rgba(0,0,0,0.2); }
  50% { box-shadow: 0 20px 15px rgba(0,0,0,0.1); }
  100% { box-shadow: 0 0 10px rgba(0,0,0,0.2); }
}

代码示例

完整实现弹跳小球的 HTML 和 CSS：

css制作小球动画

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

<style>
  .ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #ff8a00, #ff4d00);
    animation: 
      bounce 1.5s infinite cubic-bezier(0.28, 0.84, 0.42, 1),
      shadow 1.5s infinite ease-out;
  }

  @keyframes bounce {
    0% { transform: scale(1) translateY(0); }
    20% { transform: scale(0.9, 1.1) translateY(-80px); }
    50% { transform: scale(1.1, 0.9) translateY(10px); }
    100% { transform: scale(1) translateY(0); }
  }

  @keyframes shadow {
    0% { box-shadow: 0 0 15px rgba(0,0,0,0.1); }
    50% { box-shadow: 0 30px 20px rgba(0,0,0,0.05); }
    100% { box-shadow: 0 0 15px rgba(0,0,0,0.1); }
  }
</style>