图标弹跳效果 | wjs-css-effects

上下弹跳

缩放弹跳

左右摇摆

脉冲扩散

关键点

图标弹跳效果在 hover 时让图标上下跳动，增加活泼感和交互反馈
通过 @keyframes 定义 translateY 的多段关键帧，模拟弹跳的物理轨迹
使用 animation-iteration-count 控制弹跳次数，通常 1-3 次足够俏皮
缓动函数用 cubic-bezier 自定义弹性曲线，比 ease 更有弹跳感
弹跳高度控制在 6-16px 之间，过大会显得夸张，太小则不明显

效果说明

鼠标悬停时图标产生弹跳动画的效果。通过 @keyframes 定义多段位移/缩放/旋转，模拟真实的弹性弹跳运动。这里展示 4 种变体：上下弹跳、缩放弹跳、左右摇摆、脉冲扩散。