同心圆脉搏扩散的核心是多层伪元素通过transform: scale()和opacity协同动画实现，每层错开延迟与持续时间，配合cubic-bezier缓动模拟真实脉搏节奏。
用 @keyframes 实现同心圆脉搏扩散的核心逻辑
脉搏波纹本质是多个同心圆从中心点逐层向外缩放、透明度渐变的叠加动画。关键不是“画圆”，而是控制 transform: scale() 和 opacity 的协同变化：起始时缩放为 0、不透明度为 1，结束时缩放为足够大（如 2.5）、不透明度降为 0。必须用 transform 而非 width/height，否则会触发重排，动画卡顿。
常见错误是只做单层动画——看起来像一闪而过；真正脉搏感需要至少 2–3 层错开延迟的圆叠加。每层用独立的 <div> 或<a style="color:#f60; text-decoration:underline;" title="伪元素" href="https://m.php.cn/zt/15988.html" target="_blank">伪元素</a>，避免用 box-shadow 模拟，后者无法单独控制每层动画时序和缓动。
<p>示例关键帧定义：</p>
<pre class="brush:php;toolbar:false;">@keyframes pulse-ring {
0% {
transform: scale(0.33);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}</pre>
<h3>定位标记（如地图标记）上叠加波纹的 DOM 结构要点</h3>
<p>波纹必须相对于标记中心点绝对定位，且 <code>top/left 设为 50%，再用 transform: translate(-50%, -50%) 居中——这是唯一能应对标记尺寸变化或父容器 transform 干扰的方案。不要用固定像素偏移，否则在高 DPI 屏幕或缩放页面下偏移失准。
结构建议用包裹容器统一控制定位上下文：
<div class="marker">：设置 <code>position: relative，作为定位根<div class="marker-icon">：实际图标，可设 <code>z-index: 2<div class="pulse-ring">：第一层波纹，<code>z-index: 1<div class="pulse-ring pulse-ring-2">：第二层，加 <code>animation-delay: 0.3s所有
.pulse-ring必须设position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%;—— 初始尺寸极小，靠scale()扩散，而非改宽高。animation-timing-function决定“脉搏”是否真实线性缓动（
linear）看起来像机械扩张，毫无生理感；真实脉搏是先快后慢再微停的节奏。推荐用cubic-bezier(0.36, 0.11, 0.16, 1)：模拟收缩后快速弹出、再缓慢消散的过程。这个贝塞尔曲线在 Chrome DevTools 的动画面板里可拖拽调参，比记数值更可靠。多层波纹之间不能用相同
animation-duration，否则会叠成一团。典型配比：1.8s（主环）、2.4s（外环）、3s（最外环），配合0.3s逐层延迟，形成呼吸式推进感。务必加
animation-iteration-count: infinite，但注意：若标记需动态增删，用 JS 控制classList.add('pulse-active')触发动画，比直接写animation: pulse-ring 1.8s infinite更易管理生命周期。移动端与 Safari 的兼容性陷阱
Safari 对
transform+opacity合成层优化不如 Chrome，若波纹层过多（>4 层）或同时运行多个标记动画，会出现掉帧。解决方案：给每个.pulse-ring强制开启硬件加速，但不用translateZ(0)（已过时），改用will-change: transform, opacity，且仅在动画触发时添加该样式，动画结束立即移除。另一个坑是 iOS 微信内置浏览器（X5 内核）不支持
@keyframes中的百分比transform缩放，必须显式写成transform: scale(0.33) translate(-50%, -50%)，不能拆成两行声明。测试时务必真机抓包，模拟器不可靠。最后提醒：别用
background: radial-gradient()模拟波纹——它无法实现逐层独立动画，且在低配安卓机上大面积径向渐变会严重拖慢渲染。
