点击涟漪
Ripple
别名:水波纹点击涟漪波纹扩散material 点击效果涟漪动画
这是什么
点击位置向外扩散一圈半透明圆形波纹后消散，把"点中了哪里"可视化。 Material Design 的标志性按压反馈， 让无生命的点击立刻获得物理感——像石头落进水面。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 按钮、列表项、卡片等大面积可点击元素
- 触屏为主的界面（按压即触发，不依赖 hover）
- 密集列表中需要明确"点在了哪里"
✕ 不适用场景
- 极小图标按钮（波纹大于按钮，显得溢出）
- 高频连续点击的工具栏（波纹糊成一片）
- 已有强按压反馈（scale/阴影）的组件，叠加冗余
常见形式
居中波纹
Centered
从元素中心扩散，纯 CSS 可实现，最简
触点波纹
Pointer
从真实点击坐标扩散，Material 标准
有界/无界
Bounded vs unbounded
波纹是否被圆角裁剪（按钮有界、页面无界）
实现要点
position: relative + overflow hiddentransform: scale(0 → 1)opacity fadepointer-events: none点击时在按点插入一个圆形 span，从 scale(0) 放大到覆盖元素并渐隐，300～500ms 后移除； 父元素 position:relative + overflow:hidden。 触点版需要监听 offsetX/Y，纯 CSS 只能做居中版。 尊重 prefers-reduced-motion 退化为简单背景加深。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目按钮与列表项添加点击涟漪反馈。 先检查现有按钮组件与按压反馈，避免双重反馈冲突。 要求： - 从真实触点扩散，波纹被圆角裁剪 - 400ms 内完成，动画节点及时清理防内存泄漏 - 不影响布局（transform + opacity） - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
动效相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件应用于鼠标靠近按钮时，按钮像被磁铁吸住一样朝光标方向偏移一小段距离， 离开后弹性归位。偏移量按光标与按钮中心的距离计算，通常限制在 8～20px。 一种高"手感"的桌面端彩蛋交互，常出现在作品集与创意官网。
动效相似概念鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效相似概念