呼吸灯脉冲效果在界面中主要用于状态提示、按钮强调和加载等待场景。它比静态高亮更柔和，能够引导用户注意而不造成干扰。用CSS制作这种效果的核心是让元素按照固定节奏循环切换样式状态：透明度降低再恢复、尺寸轻微缩小再放大，或者阴影从中心向外扩散。浏览器会根据animation属性自动计算中间过渡帧，开发者只需要定义关键帧即可。
一、关键帧与animation循环机制
CSS动画的循环能力来自两个部分：关键帧规则和animation属性。关键帧规则用来描述动画在若干时间点的样式，例如0%、50%、100%三个位置分别定义元素的状态。0%和100%对应动画开始和结束，50%对应中间状态。浏览器会自动在两个关键帧之间做插值计算，因此即使只定义两个关键帧，也会产生平滑过渡。
animation属性负责把这些关键帧串起来执行。它包含多个子属性：animation-name指定关键帧名称，animation-duration控制单次时长，animation-timing-function决定缓动曲线，animation-iteration-count决定播放次数。要实现呼吸灯效果，通常需要把animation-iteration-count设置为infinite，让动画无限循环。缓动曲线一般选择ease-in-out，这样透明度或缩放变化在开始和结束时较慢，中间较快，更接近自然呼吸节奏。
呼吸灯动画能够流畅运行的一个重要原因，是它主要依赖opacity和transform。这两个属性在浏览器中只触发合成层更新，不会引起页面布局重排。如果直接修改width、height或者top、left，浏览器需要重新计算布局，性能会明显下降。因此实现呼吸灯时，建议只使用opacity、transform和box-shadow，其中box-shadow虽然在部分浏览器中可能触发重绘，但配合较小元素使用影响可控。
二、最基础的透明度呼吸灯
先从一个最简单的透明度脉冲开始。定义一个类名为breath的元素，在关键帧中让opacity在0.4和1之间循环，配合两秒的动画时长和infinite循环次数。代码如下：
.breath {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #4f8cff;
animation: breath 2s ease-in-out infinite;
}
@keyframes breath {
0%, 100% {
opacity: 0.4;
}
50% {
opacity: 1;
}
}
这段代码中，width和height固定，border-radius设置为50%形成圆形。animation简写属性依次指定了动画名称breath、时长2s、缓动函数ease-in-out和无限循环。关键帧breath在0%和100%时透明度为0.4，在50%时透明度为1，因此元素会从半透明逐渐变亮，再变回半透明，形成一个完整的呼吸周期。
这个基础方案适合用作状态提示点，例如在线状态、未读消息小圆点。它的优点是代码极少，几乎没有兼容性问题。如果需要调整呼吸速度，可以直接修改动画时长：时长越短，呼吸越快；时长越长，节奏越慢。比如改为3s会显得更柔和，改为1s则更有紧迫感。也可以把透明度范围改为0.2到1，让明暗对比更强烈。
三、加入缩放与阴影增强脉冲感
仅有透明度变化在某些背景上可能不够明显。为了让呼吸灯更具脉冲扩散感，可以同时改变transform的scale值和box-shadow的阴影范围。缩放能够让元素本身产生轻微的大小变化，阴影扩散则模拟光晕向外辐射的效果。三者叠加后，视觉层次会更丰富。
.pulse {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #ff5c7c;
animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
0% {
transform: scale(0.85);
opacity: 0.5;
box-shadow: 0 0 0 0 rgba(255, 92, 124, 0.6);
}
70% {
transform: scale(1);
opacity: 1;
box-shadow: 0 0 0 18px rgba(255, 92, 124, 0);
}
100% {
transform: scale(1);
opacity: 1;
box-shadow: 0 0 0 0 rgba(255, 92, 124, 0);
}
}
上述代码在0%位置让元素缩小到0.85倍，同时设置一个与背景同色但透明度为0.6的阴影。随着动画推进到70%，元素恢复原始大小，阴影扩散到18像素并逐渐变为完全透明。最后在100%保持结束状态，避免阴影突然消失。这样每一轮动画都会呈现光晕向外扩散然后淡出的效果，类似脉冲波。
注意box-shadow动画在部分低性能移动设备上可能会造成额外绘制开销。如果页面中只有少数几个脉冲元素，性能影响可以忽略；但如果有几十个同时播放，建议减少阴影扩散的像素值，或者使用伪元素来模拟阴影。另一种做法是只对opacity和transform做动画，阴影保持静态，也能获得不错的视觉提示效果。
四、多元素错峰与性能优化
实际项目中经常会出现多个呼吸灯同时展示的情况，例如一组状态点或一排按钮。如果所有元素同步呼吸，画面会显得机械。通过给不同元素设置不同的animation-delay，可以让它们错开节奏，形成波浪般的呼吸效果。animation-delay支持负值，使用负值可以让动画从中间阶段开始播放，避免初始等待。
.breath-item:nth-child(1) {
animation-delay: 0s;
}
.breath-item:nth-child(2) {
animation-delay: 0.5s;
}
.breath-item:nth-child(3) {
animation-delay: 1s;
}
.breath-item:nth-child(4) {
animation-delay: 1.5s;
}
这段代码通过nth-child选择器为每个子元素设置不同的animation-delay。延迟时间可以配合动画时长来调整，例如动画时长2s，四个元素各延迟0.5s，就能均匀覆盖一个周期。如果元素数量不固定，也可以在生成HTML时通过内联样式或CSS变量动态设置延迟。
在性能优化方面，除了前面提到的只用opacity和transform，还可以使用will-change属性提前告知浏览器哪些属性即将发生变化。will-change可以让浏览器把元素提升到合成层，减少动画过程中的重绘和重排。但will-change不宜滥用，因为过多的合成层会占用显卡内存。一般只对需要长期循环动画的元素添加will-change: opacity, transform。动画结束后可以移除该属性。对于呼吸灯这种持续动画，保留will-change是合理的。
另外，使用prefers-reduced-motion媒体查询可以照顾对动画敏感的用户。当用户系统开启减少动态效果时，可以关闭呼吸灯动画或缩短时长。这样既保证了可访问性，也体现了对用户体验的细致考虑。示例代码如下：
@media (prefers-reduced-motion: reduce) {
.breath,
.pulse {
animation: none;
opacity: 1;
transform: none;
}
}
完整方案结合透明度、缩放、阴影、延迟和性能优化，可以覆盖大多数呼吸灯需求。整体实现不需要JavaScript，全部由CSS完成，维护成本低，加载速度快。使用动画循环时注意避免对尺寸类属性做动画，就能在移动端和桌面端都保持流畅。