金色光环扩散效果需用@keyframes定义三段式动画：0%缩放0.6、透明度0.8；70%缩放1.4、透明度0.4并加模糊；100%缩放1.6、透明度0，配合rgba渐变box-shadow，通过.active类触发1.2s ease-out动画并forwards保持终态。
用 CSS 关键帧（@keyframes）实现新消息来临时头像框周围的金色光环扩散效果，核心是叠加一个绝对定位的伪元素或额外 span，通过缩放 + 透明度变化 + 阴影强化，模拟“光晕由内向外脉冲扩散”的视觉感。不需要 JS 动画库，纯 CSS 即可触发。
1. 结构准备：给头像容器加一层可动画的包裹
确保头像外层有相对定位，方便内部光环元素精确定位：
- 头像用
<img>或<div class="avatar"></div>，父容器设position: relative - 新增一个
<span class="msg-pulse"></span>作为光环元素，放在头像同级或内部均可 - 初始状态隐藏该元素：
opacity: 0; transform: scale(0.8)（避免页面加载时闪一下）
2. 定义关键帧：模拟真实光晕扩散节奏
金色光环不是匀速放大，而是先快后慢、带轻微回弹感更自然。推荐三段式关键帧：
-
0%：transform: scale(0.6); opacity: 0.8; box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7) -
70%：transform: scale(1.4); opacity: 0.4; box-shadow: 0 0 0 12px rgba(255, 215, 0, 0.4) -
100%：transform: scale(1.6); opacity: 0; box-shadow: 0 0 0 20px rgba(255, 215, 0, 0)
注意：用 box-shadow 扩展光晕比纯边框更柔和；rgba 的 alpha 值随扩散递减，避免生硬收尾。
3. 触发动画：用 class 切换控制播放
收到新消息时，给光环元素添加一个类（如 active），CSS 中定义该类启用动画：
.msg-pulse.active { animation: pulse-gold 1.2s ease-out forwards; }- 加
forwards确保动画结束后保持最终状态（透明不可见），避免重复点击闪回 - 如需连续提示，可监听消息事件，每次添加 class 后用
setTimeout移除，再重新添加（防止动画被卡住）
4. 增强真实感的小细节
纯金色容易刺眼，建议微调提升质感：
- 主色用
#FFD700（标准金），但阴影中混入一点#FFEA00（亮黄）增加层次 - 在
70%节点加filter: blur(1px)，让边缘略虚化，更接近光晕物理特性 - 若头像有圆角，光环元素也设
border-radius: 50%，并用overflow: hidden防止扩散溢出
不复杂但容易忽略：动画必须用 transform 和 opacity 触发 GPU 加速，避免使用 left/top/width，否则在低端安卓 H5 中易掉帧。
