MOTION EFFECT
水波涟漪Ripple
从中心一圈圈向外扩散的同心圆环。Magic UI 的 Ripple 组件常放在标题背后做「信号发出」的隐喻。
效果预览
Ripple
适合用在哪
标题背景、直播/在线状态、广播式产品（通知、推送）、下载中。
容易踩的坑
- 放大到 scale(3.4) 的环溢出容器，未设 overflow:hidden 会盖住相邻区块。
- 涟漪颜色与标题同色且透明度高，会干扰标题的可读性。
- 持续扩散暗示「在线/广播中」，状态实际已结束时必须停止动画。
设计提示词 · Prompt
水波涟漪（Ripple）：容器居中放一个内容元素（标题或圆形按钮）。用 4 个 38×38px 的圆环绝对居中，边框 1.5px 主色，初始 opacity:0。每个环动画 3s ease-out 无限循环：transform 从 scale(.35) 到 scale(3.4)，opacity 从 .85 到 0；四个环用 0 / .7s / 1.4s / 2.1s 的 animation-delay 错开，就形成连续不断向外扩散的水波。中心内容用 z-index 压在最上层。
Ripple: center a content element (a title or a round button) in the container. Absolutely center 4 rings of 38×38px with a 1.5px primary-color border, initial opacity:0. Each ring animates 3s ease-out, infinite: transform from scale(.35) to scale(3.4), opacity from .85 to 0; offset the four rings with animation-delay of 0 / .7s / 1.4s / 2.1s to create continuous outward-spreading water ripples. Keep the center content on the top layer via z-index.
常见搭配
同一页面里经常和「水波涟漪」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="m-ripple">
<i></i><i style="animation-delay:.7s"></i><i style="animation-delay:1.4s"></i><i style="animation-delay:2.1s"></i>
<b>Ripple</b>
</div>
</div>