动态弥散光晕边框

Conic Gradient 旋转渐变描边 + 底部动态模糊的呼吸弥散背光，卡片自带"发光"高级感。下面三张卡片演示不同激活方式：

实时 Demo

常驻旋转

动画一直跑，适合首页首屏 CTA 卡片，不用等交互。

ConicBlurBreathe

悬停激活

把指针移上来：描边开始旋转，背光开始呼吸，移开即停。

HoverTransitionOn/Off

慢速豪华

同一套代码，把动画时长拉到 8s，气质立刻从"炫"变成"贵"。

8sSubtlePremium

效果拆解

渐变描边的精髓是 mask：伪元素 inset:-2px 铺满 conic 渐变，再用双层 mask（content-box + 外层，mask-composite: exclude）把中间挖空，只留 2px 边框。
旋转靠 @property：声明 @property --rot { syntax:'<angle>' } 后，CSS 动画可以插值这个自定义属性，conic 的起始角才能平滑转起来；不支持的浏览器退化为跳变。
弥散背光：卡片底部一个扁椭圆 radial-gradient + filter: blur(12px) + z-index:-1 垫在卡片后面，opacity 2.4s 呼吸循环。
悬停激活：默认 opacity:0，hover 时渐显 + 启动动画，过渡 .25s，省 GPU。
注意：conic 旋转每帧重绘伪元素，大面积多卡片时建议只在 hover/视口内开，别整页常驻。

AI 提示词

为 Card 添加旋转渐变描边（Conic Gradient Border）：用伪元素铺满 2px 宽的多色 conic-gradient，通过 content-box 双层 mask（mask-composite: exclude）挖空中间只留边框；用 @property 声明角度变量让起始角可动画，3.2s 线性无限旋转；卡片底部附带动态模糊的呼吸弥散背光——扁椭圆 radial-gradient 加 blur(12px) 垫在卡片后，opacity 2.4s ease-in-out 呼吸循环；支持 hover 激活模式：默认隐藏，悬停渐显并启动动画。为 Card 添加旋转渐变描边（Conic Gradient Border）：用伪元素铺满 2px 宽的多色 conic-gradient，通过 content-box 双层 mask（mask-composite: exclude）挖空中间只留边框；用 @property 声明角度变量让起始角可动画，3.2s 线性无限旋转；卡片底部附带动态模糊的呼吸弥散背光——扁椭圆 radial-gradient 加 blur(12px) 垫在卡片后，opacity 2.4s ease-in-out 呼吸循环；支持 hover 激活模式：默认隐藏，悬停渐显并启动动画。

换色直接改 conic-gradient 里的色标；想让描边更粗，改 padding 即可。
提示词内置 mask 挖空与 @property 两个关键点，AI 不容易翻车。