h5点赞图标变红+光晕扩散效果需分离颜色与光晕层：用.icon-heart切换红色class，.pulse-ring通过@keyframes实现scale与opacity动画，js点击时toggle类并强制重播动画。
在 H5 页面中实现“点赞后图标变红 + 光晕扩散”效果，核心是结合 CSS 动画（@keyframes）与状态切换（如 classList.toggle()），无需依赖 JS 动画库。关键在于分离「颜色变化」和「光晕动画」两个视觉层，并控制它们的触发时机与持续时间。
1. 结构：用两个重叠元素分别承载图标和光晕
避免对单个 SVG 或 iconfont 元素强行叠加 box-shadow 动画（易卡顿且难控制扩散感），推荐 HTML 结构如下：
<button class="like-btn"> <i class="icon-heart"></i> <span class="pulse-ring"></span> </button>
说明：
- .icon-heart 是实际图标（可用字体图标或 inline SVG）；
- .pulse-ring 是纯装饰层，初始隐藏，点击后显示并播放扩散动画。
2. 样式：定义颜色切换 + 独立光晕关键帧
颜色变化用普通 class 切换即可，光晕用 @keyframes 实现从无到有、透明度渐隐的同心圆扩散：
.icon-heart {
color: #999;
transition: color 0.2s ease;
}
.icon-heart.liked {
color: #e74c3c; /* 红色 */
}
<p>.pulse-ring {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(231, 76, 60, 0.5);
opacity: 0;
pointer-events: none;
transform: scale(0.5);
animation: pulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}</p><p>@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 0.7;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}</p>
注意细节：
- 使用 cubic-bezier(0.4, 0, 0.2, 1) 模拟自然缓出效果，比 ease-out 更柔和；
- transform: scale() 比直接改 width/height 性能更好；
- pointer-events: none 防止光晕层遮挡按钮点击。
3. 交互：JS 控制状态与动画重播
点击时添加 liked 类，并确保每次点击都重新触发光晕动画（需清空再加类）：
const btn = document.querySelector('.like-btn');
const icon = btn.querySelector('.icon-heart');
const ring = btn.querySelector('.pulse-ring');
<p>btn.addEventListener('click', () => {
icon.classList.toggle('liked');</p><p>// 强制重播光晕动画：移除再添加类（或用 void offsetWidth 触发重排）
ring.classList.remove('animate');
void ring.offsetWidth; // 强制重排
ring.classList.add('animate');
});</p>
对应补充 CSS（可选）：
.pulse-ring.animate {
animation: pulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
4. 进阶优化建议
- 移动端加
touch-action: manipulation减少点击延迟 - 图标使用 inline SVG 可更精细控制描边/填充动画（如心跳式缩放）
- 若需支持取消点赞，光晕动画应只在「变红时」触发，可在 JS 中判断状态分支处理
- 避免在低性能设备上同时跑多个脉冲动画，可加节流或限制同时活跃数
