脉冲式消失效果通过css动画实现：先scale(1.25)放大，再scale(0.1)缩小并opacity:0透明消失，总时长350ms、ease-out缓动，js添加pulse-out类后监听animationend移除元素。
在 H5 移动端中，为通知小红点实现“脉冲式消失”效果（即先轻微放大再快速缩小至透明消失），关键在于结合 transform: scale() 与 opacity 的 CSS 动画，并控制时序节奏。下面给出简洁、可直接复用的实现方案：
1. 结构与基础样式
确保小红点是独立元素（如 <span class="badge-pulse"></span>），并设置初始状态：
.badge-pulse {
display: inline-flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
background: #ff4757;
color: #fff;
font-size: 10px;
border-radius: 50%;
font-weight: bold;
line-height: 1;
/* 初始隐藏（准备触发） */
opacity: 0;
transform: scale(0.8);
/* 禁用指针事件，避免干扰交互 */
pointer-events: none;
}2. 定义脉冲消失动画
使用 @keyframes 描述三阶段：放大 → 回弹 → 消失。注意节奏要快（建议总时长 300–400ms），强调“弹出感”：
@keyframes pulseOut {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.25); /* 轻微放大，制造脉冲感 */
}
100% {
opacity: 0;
transform: scale(0.1); /* 快速缩到极小，视觉上“收走” */
}
}
<p>.badge-pulse.pulse-out {
animation: pulseOut 0.35s ease-out forwards;
}</p>- ease-out 让后半段更快，增强“弹完就收”的利落感
-
forwards保证动画结束后保持opacity: 0和scale(0.1)，避免闪回 - 若需兼容老版 iOS Safari，可加
-webkit-animation前缀
3. 触发逻辑（JS 控制）
移除小红点时，不直接 remove() 或 display: none，而是添加动画类，等动画结束再清理 DOM：
function hideBadgePulse(el) {
el.classList.add('pulse-out');
el.addEventListener('animationend', () => {
el.remove(); // 或 el.style.display = 'none'
}, { once: true });
}
<p>// 使用示例
const badge = document.querySelector('.badge-pulse');
hideBadgePulse(badge);</p>- 用
{ once: true }防止重复监听 - 若小红点需复用（比如清空后又新增），建议用
display: none+opacity: 0替代remove() - 移动端要注意避免动画期间触发 layout thrashing，推荐用
transform和opacity（均为合成属性）
4. 进阶优化（可选）
提升真实感和性能：
- 加轻微阴影增强立体感：
box-shadow: 0 0 4px rgba(255, 71, 87, 0.5) - 动画前强制硬件加速：
will-change: transform, opacity（仅在动画触发前动态添加） - 适配高倍屏：用
rem或vw控制尺寸，或 JS 动态设style.fontSize
不复杂但容易忽略——脉冲的关键不在“动得多”，而在“节奏准”：放大要克制（1.2~1.3 倍足够），收尾要干脆（scale(0.1) + opacity: 0 同步完成）。这样既轻量，又符合移动端用户对反馈“瞬时性”的直觉预期。
