微交互动效集演示页

01

按钮涟漪

需要少量 JS 计算点击坐标扩散波纹

02

卡片悬浮

悬浮预览卡片 Hover 时阴影加深抬升

CSS-only transform 与 shadow 缓动

03

开关 Toggle

弹性开关

CSS-only 平移位移 + 颜色平滑渐变

04

勾选 Checkbox

完成待办事项

CSS-only SVG 路径绘制 + 回弹动画

05

输入框浮动 Label

电子邮箱地址

CSS-only Focus 上浮缩小过渡

06

徽章数字变化

8 9

悬停看数字滚动 (+1)

CSS-only Keyframe / Reel 数字滚轮

07

点赞心形

需要少量 JS 心形填充 + 周围粒子散射

08

菜单下划线

CSS-only Hover 下划线从 0 到 100% 展开