Appearance
边框流光
流动发光边框
实时预览
Glow Border
代码
css
.glow-border{width:200px;height:120px;border:2px solid #333;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;cursor:pointer;position:relative;overflow:hidden;background:#1a1a2e}
.glow-border::before{content:'';position:absolute;inset:-2px;background:conic-gradient(from 0deg,#667eea,#764ba2,#f093fb,#f5576c,#667eea);border-radius:12px;z-index:-1;opacity:0;transition:opacity .3s}
.glow-border:hover::before{opacity:1}纯 CSS 实现的边框流光悬停效果——当鼠标悬停在元素上时，通过 transition 和 transform 属性触发平滑的视觉变化。不需要任何 JavaScript，拷贝代码即可集成到你的网站中。
快速使用
- 从下方代码块复制 CSS 到你的样式文件中
- 将 HTML 结构粘贴到你的页面模板
- 给目标元素添加对应的 class 名称
- 根据需要调整颜色、大小、动画时长等参数
使用场景
- 卡片和磁贴：悬停时上浮+阴影延伸，给用户可点击的视觉暗示
- 按钮和链接：悬停变色、缩放或发光，提供即时交互反馈
- 图片和缩略图：悬停放大或模糊聚焦，突出重点内容
- 导航菜单：下划线展开或背景色滑入，指示当前位置
常见问题
Q: Hover 效果在手机上不生效怎么办？ A: 手机的触摸屏没有 hover 状态。建议用 @media (hover: hover) 包裹 hover 样式，只在支持悬停的设备上应用。对于移动端，可用 :active 伪类做点击反馈。
Q: 动画会影响页面性能吗？ A: 本效果只用 transform 和 opacity 做动画，这两个属性由 GPU 合成器处理，不触发页面重排（reflow），性能开销极小，120fps 流畅运行。
Q: 如何修改动画的触发方式？ A: 将 :hover 改为 :active（点击触发）、.active（JS 控制类名触发）或配合 @media (prefers-reduced-motion) 做无障碍适配。
浏览器兼容性
本效果使用标准 CSS 属性，所有现代浏览器（Chrome、Firefox、Safari、Edge）均完全支持。
| 浏览器 | 兼容性 |
|---|---|
| Chrome / Edge | ✅ 完全支持 |
| Firefox | ✅ 完全支持 |
| Safari | ✅ 完全支持 |
| 移动端浏览器 | ✅ 完全支持 |
| IE 11 | ⚠️ 部分属性需要 -ms- 前缀或降级 |