头像光环悬停 4 种特效（脉冲光环/虚线旋转/渐变辉光 CSS 源码）

效果演示（真实可交互）

把鼠标移到任意头像上，观察光环的出现方式。头像本身用渐变圆加表情演示，替换成真实图片后效果一致，伪元素实现的光环不会影响头像裁切。

完整代码

HTML 结构：.av-ring 是头像容器，.av-face 是头像本体，光环全部由 ::before 伪元素实现：

<figure class="av-card">
  <div class="av-ring av-pulse"><span class="av-face">🦊</span></div>
  <figcaption>光环扩散</figcaption>
</figure>
<!-- 换用 av-dash / av-glow / av-zoom 切换玩法 -->

核心 CSS：

.av-ring { position: relative; width: 88px; height: 88px; border-radius: 50%; }
.av-face {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

/* ① 光环扩散：圆环 hover 时放大并淡出，模拟脉冲 */
.av-pulse::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid #6c8cff;
  opacity: 0;
  transition: transform .6s ease-out, opacity .6s ease-out;
}
.av-card:hover .av-pulse::before { transform: scale(1.45); opacity: 1; }

/* ② 虚线旋转光环 */
.av-dash::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px dashed rgba(108, 140, 255, .85);
  opacity: 0;
}
.av-card:hover .av-dash::before {
  opacity: 1;
  animation: av-spin 6s linear infinite;
}
@keyframes av-spin { to { transform: rotate(360deg); } }

/* ③ 渐变辉光：mask 挖空出渐变描边 + drop-shadow 光晕 */
.av-glow::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #ff6ec4, #7873f5, #4ade80);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
}
.av-card:hover .av-glow::before {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(120, 115, 245, .8));
}

参数说明

兼容性与性能

• 纯 CSS 实现；mask-composite 需要 Chrome 120+ / Safari 15.4+，老浏览器可用 border-image 渐变或直接叠一层半透明圆环代替
• 动画仅涉及 transform、opacity、filter，全部为合成器属性，性能开销极小
• 头像数量多的列表页建议开启 will-change: transform，避免悬停瞬间出现锯齿
• 触屏设备无 hover，可搭配 @media (hover: none) 让光环常驻展示

常见问题

Q: 光环想一直显示而不是悬停才出现？ 把 ::before 的 opacity: 0 删除、默认态直接给 opacity: 1，并把 animation 移出 hover 规则即可。

Q: 渐变描边在 Firefox 上显示不出来？ Firefox 需要标准 mask-composite: exclude，同时保留 -webkit- 前缀；如果仍异常，改用 background: conic-gradient(...) 加 inset 遮罩方案。

Q: 真实头像怎么放进去？ 把 .av-face 换成 <img>，设置 width: 100%; height: 100%; border-radius: 50%; object-fit: cover;，inset: 4px 会让头像与光环之间留出空隙。

Q: 可以商用吗？ 可以，本组件为粤喵自研原创，免费商用无需署名，欢迎调整颜色、尺寸与动画时长。