图标按钮 | wjs-css-effects

箭头滑入

简洁箭头

圆形旋转

下载弹跳

关键点

图标按钮通过 hover 时图标的位移、旋转、弹跳等微动效提升交互感
箭头滑动效果用 transform: translateX() 让图标向右平移，配合文字形成"前进"暗示
旋转效果使用 transform: rotate()，让图标转一圈或指定角度，增加趣味性
弹跳效果通过 translateY 上下位移 + ease-out 缓动模拟弹性物理感
动效幅度不宜过大，保持在 4-12px 位移或 15-30 度旋转，精致不夸张

效果说明

带图标的交互动效按钮。hover 时图标产生动画效果，如箭头滑动、旋转、弹跳等，增强按钮的交互引导性。这里展示 4 种变体：箭头滑入、简洁箭头、圆形旋转、下载弹跳。