头像呼吸光环与悬停旋转放大的纯 CSS 实现

给评论区或成员列表的头像加两个小动效：平时一圈颜色渐变的呼吸光环，鼠标悬停时放大并旋转。一段自定义 CSS 就够，不依赖 JS。

效果构成

两个动作拼成：一是无限循环的 box-shadow 动画，光晕颜色在红、绿、蓝之间来回变化，周期 4 秒；二是 hover 时 scale(1.15) 放大叠加 rotate(720deg) 旋转，靠 0.5s 的 transition 做过渡。

自定义 CSS 代码

/*头像呼吸光环和鼠标悬停旋转放大开始*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}

使用注意

选择器写的是 .avatar，前提是主题头像统一挂这个类名；不是的话换成主题实际的类。动画只作用于阴影和变换，开销不大，但移动端没有真正的 hover，悬停效果往往点一下才触发，介意的话只保留呼吸光环那一段。