css跳动制作

CSS 跳动效果制作方法

使用 transform 和 animation 实现基础跳动

通过 CSS 的 transform 属性和 @keyframes 动画可以创建简单的跳动效果。以下是一个基础示例：

.jump {
  animation: jump 0.5s ease infinite alternate;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}

将 infinite 设置为无限循环，alternate 使动画来回播放，ease 让运动更自然。

弹性跳动效果

模拟真实弹跳物理效果，可以调整关键帧的 transform 和 timing-function：

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

.elastic {
  animation: bounce 1s infinite;
}

通过 cubic-bezier 函数调整时间曲线，实现加速下落和减速上升的效果。

元素缩放跳动

结合 scale 变形实现视觉上的膨胀效果：

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 1s infinite;
}

文字字符逐个跳动

为每个字母添加延迟动画，创造波浪式效果：

.letter {
  display: inline-block;
  animation: jump 0.3s ease infinite alternate;
}

.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 0.1s; }
.letter:nth-child(3) { animation-delay: 0.2s; }
/* 继续添加更多延迟 */

按钮交互跳动

为按钮添加按下时的压缩效果：

.button:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}

通过 :active 伪类实现点击时的即时反馈。

性能优化建议

• 优先使用 transform 和 opacity 属性，这些属性不会触发重排
• 避免过多使用 box-shadow 等高性能消耗属性
• 使用 will-change: transform 提前告知浏览器元素会发生变化

这些方法可以灵活组合或调整参数以满足不同场景需求。通过修改动画持续时间、运动幅度和缓动函数，可以创造从轻微颤动到强烈弹跳的各种效果。