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提前告知浏览器元素会发生变化
这些方法可以灵活组合或调整参数以满足不同场景需求。通过修改动画持续时间、运动幅度和缓动函数，可以创造从轻微颤动到强烈弹跳的各种效果。
