动画 · 注意力引导 · 20

流光描边

流光描边 = 一圈旋转的圆锥渐变环绕元素，用来标示「实时 / 活跃 / 高端」状态。

Live

尊重 prefers-reduced-motion：动画关闭，仅保留终态。

怎么向 AI 描述它

Add a glow border: a rotating conic-gradient ::before behind the content, transform: rotate only.

Tighten the gradient to a 1px edge and slow the spin to 8s for a subtle premium frame.

Drive the glow from a 'live' state (not an infinite loop), expose --glow-color and --glow-speed, and under prefers-reduced-motion freeze the ring as a static 1px accent border. Keep the rotating layer clipped to the rounded corner.

修改类 Prompt 只动目标，不碰页面其余部分。

流光描边是什么？

流光描边用一圈缓慢旋转的光（背后旋转的圆锥渐变）包住元素，读作「实时 / 高端 / 开启」。因为动的是伪元素的 transform，它始终跑在合成层。省着用：到处都在转的边框只是噪音。

动画标本

触发: mount
技术: css
时长: 4s
缓动: linear
性能: transform

什么时候用

Live / recording / 'on' indicators
Premium or featured card frames

什么时候别用

On every card — it stops meaning anything
Around dense text where the motion distracts

The motion lives on a pseudo-element, so the box stays still and the effect stays cheap.

获取代码

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.glow {
  position: relative;
  padding: 16px 22px;
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--ink, #1a1c22);
  font: 600 14px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  isolation: isolate;
}
.glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--anim-accent), transparent 35%, var(--anim-accent));
  z-index: -1;
  animation-name: spin;
  animation-duration: var(--anim-duration, 4s);
  animation-timing-function: var(--anim-easing, linear);
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

<div class="glow anim-el">Live</div>

复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。

另见

风格

玻璃拟态→

主题

AI SaaS 落地页→

组件

卡片→

流光描边

流光描边是什么？

动画标本

什么时候用

什么时候别用

另见

组件

动画

风格

主题

Prompt

术语

反模式

流光描边

流光描边是什么？

动画 标本

什么时候用

什么时候别用

另见

动画标本