氛围与背景 · 页面的空气
描边流光Running border
- 贵
- 有方向
- 持续
一段光沿着卡片边缘绕圈跑，后面拖一条模糊的尾巴。卡片的底色和文字完全不动 —— 动的只有那一圈边，所以它能在不打扰阅读的前提下一直说「这张卡是活的」。
什么时候用它
给「可以点而且值得点」的那一张卡用：会员卡、正在进行的活动、首屏的主行动。一屏最多一条 —— 两条同框，眼睛会先挑一条看，另一条就白做了；纯展示的图卡和列表项也别用，那里没有需要强调的东西。
参数
stroke-dasharray 16% of perimeter · 0.13px/ms travel · linear, constant speed · glow blur 5px · head 1.6px + drop-shadow
配方
描边流光 → stroke-dasharray 16% of perimeter · 0.13px/ms travel · linear, constant speed · glow blur 5px · head 1.6px + drop-shadow
给 AI 的一句话
给这张卡的描边加一段流光：用 SVG 的 stroke-dasharray 把边框裁出一段，长度取周长的 16%，然后让 stroke-dashoffset 匀速减小，那一段就绕着卡片跑起来。同一段要叠三层——底下是原本 1px 的静态描边，中间一层 3px 的强调色带 5px 模糊，最上面一层 1.6px 的白线加一点外发光当「头」。圆角处要让 dash 自己跟着路径走，不要拿四条直边拼。