卡片发光边框动画

使用 @keyframes 旋转渐变背景，模拟发光边框效果。

实时预览

发光边框

代码

css

@keyframes glow-rotate {
  to { transform: rotate(360deg); }
}
.card-wrap {
  position: relative; padding: 3px; border-radius: 14px;
  background: conic-gradient(#ff6ec4, #7873f5, #4adede, #ff6ec4);
  animation: glow-rotate 3s linear infinite;
}
.card-inner {
  background: #1a1a2e; border-radius: 11px;
  width: 100%; height: 100%;
}

html

<div class="card-wrap">
  <div class="card-inner">内容</div>
</div>

纯 CSS 实现的卡片发光边框动画卡片动画效果——通过变换、阴影和滤镜让卡片在悬停时产生层次变化。适用于产品展示、文章列表、个人主页等内容型网站的卡片组件。

快速使用

复制 CSS 代码到你的样式文件中
在需要应用动画的卡片容器上添加对应的 class
根据需要调整卡片的宽高、圆角和内边距
修改颜色和阴影值以匹配你的品牌风格

使用场景

产品展示卡片：悬停浮起+阴影增强，突出当前关注的商品
文章列表：卡片翻转展示标题和摘要的双面信息
仪表盘/数据面板：毛玻璃卡片配合模糊背景营造层次感
个人主页/简历：3D 倾斜卡片跟随鼠标展示趣味交互

常见问题

Q: 卡片翻转效果如何实现两面不同内容？ A: 使用 transform-style: preserve-3d + backface-visibility: hidden，正面和背面分别放在两个绝对定位的子元素中，背面用 transform: rotateY(180deg) 初始隐藏。

Q: 毛玻璃效果对性能有影响吗？ A: backdrop-filter: blur() 是 GPU 密集型操作。建议只在需要强调的卡片上使用，不要在页面上大量铺开。移动端可以考虑降低模糊半径或关闭毛玻璃效果。

Q: 卡片阴影动画会触发重排吗？ A: box-shadow 的变化会触发重绘（repaint）但不触发重排（reflow）。如果卡片数量多，建议用伪元素 + opacity 过渡模拟阴影变化，避免频繁重绘。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持（含 backdrop-filter）
Firefox	✅ 完全支持
Safari	✅ 完全支持（需 `-webkit-backdrop-filter`）
移动端浏览器	✅ 完全支持
IE 11	❌ backdrop-filter 和 3D transform 不支持

使用说明

属性	说明
`conic-gradient`	锥形渐变模拟发光效果
`animation: glow-rotate`	无限旋转动画
`padding: 3px`	渐变区域作为边框

卡片发光边框动画 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐