Gradient Border
A ring of gradient light slowly orbits the border — reserved for hero content
Live preview (drag the parameters, watch it change)
Code
<div class="glow-border">…</div>
<style>
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.glow-border { position: relative; border-radius: 16px; background: #fff; }
.glow-border::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
background: conic-gradient(from var(--a), #141414, #c9c6bf 25%, #f5f3ee 50%, #141414 75%, #c9c6bf);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: glow-spin 5s linear infinite;
}
@keyframes glow-spin { to { --a: 360deg; } }
</style><!-- 骨架用 Tailwind，光环伪元素用一小段自定义 CSS（同 html-css 档的 ::before） -->
<div class="glow-border relative rounded-[16px] bg-white">…</div>export function GlowBorder({ children }) {
return <div className="glow-border">{children}</div>;
}
/* CSS 与 html-css 档相同（@property --a + conic-gradient + mask 镂空） */Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
用 conic-gradient 画一个旋转的锥形渐变，再用 mask 把中间镂空只剩边框一圈。旋转靠 @property 注册的 --a 角度变量做动画（现代浏览器支持）。不支持 @property 的浏览器会看到一圈静态渐变边框——优雅降级，不算坏。
How it works (English)
Draw a rotating conic-gradient, then mask out the middle so only a border ring remains. Rotation animates a @property-registered angle variable --a (supported in modern browsers). Browsers without @property see a static gradient border — graceful degradation, not breakage.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。