MOTION EFFECT
旋涡隧道Vortex
同心圆环一边旋转一边向中心收缩消失，形成「被吸进去」的隧道错觉。加载页与上线页的常见主角。
效果预览
Vortex · 旋涡隧道
适合用在哪
加载/等待页、发布倒计时、AI 生成中的过场。
容易踩的坑
- 旋转加收缩的隧道错觉易引发眩晕，必须提供减弱动效降级。
- 作为加载动画却没有 role=status 文案，读屏用户不知道在等待。
- 等待超过 10 秒仍只有旋涡，没有进度或预计时间会让人焦虑。
设计提示词 · Prompt
旋涡隧道（Vortex）：一个 132×132px 的正方形舞台，5 个同心圆环绝对居中，直径从 126px 递减到 16px，边框 1.5px 且颜色由浅紫到主色逐层加深，最内圈填实色。每个环用 3.4s ease-in-out 无限循环：transform 从 rotate(0) scale(1) 到 rotate(220deg) scale(.1)，opacity 从 1 到 0；相邻环的 animation-delay 依次错开 0.22s，就形成了连续向内吸入的错觉。
Vortex: a 132×132px square stage with 5 concentric rings absolutely centered, diameters decreasing from 126px to 16px, 1.5px borders whose color deepens layer by layer from light purple to the primary color, with the innermost ring filled solid. Each ring loops 3.4s ease-in-out, infinite: transform from rotate(0) scale(1) to rotate(220deg) scale(.1), opacity from 1 to 0; stagger adjacent rings' animation-delay by 0.22s to create the illusion of being continuously sucked inward.
常见搭配
同一页面里经常和「旋涡隧道」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-col" style="align-items:center;gap:9px"> <div class="m-vortex"><i></i><i></i><i></i><i></i><i></i></div> <span class="d-tiny">Vortex · 旋涡隧道</span> </div>