CARD
流光边框卡片Conic Border Card / Animated Gradient Border
一道 conic-gradient 光带沿着卡片边框匀速旋转，像有一圈光在流动。
效果预览
AI Copilot 已就绪
一道光带正沿着边框流动——conic-gradient 加 @property 的旋转动画。
适合用在哪
AI 产品卡片、旗舰功能、新品发布；科技感拉满的强调手段。
容易踩的坑
- 同屏多张卡同时无限旋转，GPU 持续占用，笔记本风扇狂转、电池掉得快。
- 不响应 prefers-reduced-motion，无限循环动画持续干扰阅读。
- 父元素未建立层叠上下文，z-index:-1 的伪元素跑到页面背景后面看不见。
设计提示词 · Prompt
流光边框卡片（Animated Conic Gradient Border）：先声明 @property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}。卡片本体 position:relative;z-index:0，::before 铺满外扩 1.5px、border-radius 比 1 大 1.5px、background:conic-gradient(from var(--angle),色A,色B,色C,色A)、z-index:-1、animation:spin 4-6s linear infinite（keyframes 把 --angle 转到 360deg）。再叠 ::after（inset:1.5px、白底、z-index:-1）充当卡面。不支持 @property 的浏览器会静止显示渐变边框，属于优雅降级。
Animated Conic Gradient Border: first declare @property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}. The card itself is position:relative;z-index:0; its ::before fills it with a 1.5px outward expansion, a border-radius 1.5px larger, background:conic-gradient(from var(--angle), color A, color B, color C, color A), z-index:-1, and animation:spin 4-6s linear infinite (keyframes rotate --angle to 360deg). Then layer an ::after (inset:1.5px, white background, z-index:-1) as the card face. Browsers without @property support display a static gradient border, which is a graceful degradation.
常见搭配
同一页面里经常和「流光边框卡片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-conic"> <b>AI Copilot 已就绪</b> <span>一道光带正沿着边框流动——conic-gradient 加 @property 的旋转动画。</span> </div>