做 UI 和前端这几年我发现自己跟“呼吸灯”这三个字纠缠的次数特别多。小到按钮上的加载圆点大到智能硬件面板里的状态灯很多产品都想用“呼吸”来表达“我活着、我还在工作、我收到了消息”。但真正动手做的时候大部分人的第一版实现都是简单闪烁透明度从 0 到 1再瞬间变回 0。结果做出来怎么看怎么像故障灯一点“呼吸感”都没有。所谓“智能呼吸灯透明度/缩放动画”说白了就是用透明度加缩放这两个属性模拟人呼吸时的柔和节律。这个项目思路一旦吃透你能用到的地方非常多网页端消息提醒、耳机/音箱的灯效模拟、智能家居面板的状态反馈、大屏可视化的数据点亮起几乎全是同一套逻辑。这篇文章我不会只丢一个 Demo而是把效果拆解、参数选择、CSS 实现、JavaScript 动态控制、性能优化和常见坑位都讲一遍。新手可以直接照着抄老手也能在旁边捡到几个调参和避坑的思路。1. 效果拆解为什么透明度和缩放必须一起用1.1 呼吸感从哪来光不是灯光是一团“气”先想一个问题一个圆点从暗变亮再变暗这是不是呼吸灯视觉上是感觉上不是。真正的呼吸灯亮度变化是持续的、有坡度的而且发光范围也会有轻微膨胀。你盯着一盏呼吸灯看几秒钟会感觉它在“起伏”而不是在“开关”。这里的关键就是透明度和缩放要同时参与。透明度负责亮暗强弱缩放负责体量大小。亮度上来的时候光的范围跟着大一点点亮度下去的时候光的范围也缩回来。两个变量叠加光就从“一个颜色固定的元素”变成了“一团有体积感的光气”。这个逻辑放哪都成立。网页里的呼吸点是这样硬件的 LED 灯效也是这样。硬件是靠 PWM 调亮度、靠扩散片和半透明罩子做虚化网页里没有物理光就只能靠 opacity 和 scale 去骗眼睛。骗得好了用户的感知就是“柔和、舒服”骗得不好就是“这按钮是不是坏了”。我在做智能设备模拟面板的时候最早只改 opacity圆点确实在呼吸但总觉得少了点东西。后来把 scale 加上呼吸瞬间就活了。透明度负责“呼吸”缩放负责“体积”两者缺一不可。1.2 控制曲线别用线性用正弦呼吸感的核心不是“会变”而是“怎么变”。很多人写动画喜欢用 linear线性变化。线性问题在于速度是匀速的亮起来和暗下去的节奏一样机械感很强。真实呼吸不是匀速的吸气的时候先慢后快再慢呼气也是弧线。用数学语言说这就是一个正弦曲线。前端做动画时最简单的做法是给 animation 加 easing。比如animation: breathe 2.4s ease-in-out infinite。ease-in-out 已经比 linear 好很多起始和结束都比较平缓中间加速正好符合呼吸的柔和感。如果你想更精确可以直接用cubic-bezier(0.45, 0, 0.55, 1)。这个曲线起点比 ease-in-out 更自然。我的个人经验是用 ease-in-out 已经能满足 80% 的场景真觉得不对再微调 cubic-bezier不要一上来就背参数。还有一个容易踩坑的细节透明度不要从 0 到 1。完全透明到完全不透明中间会有明显的“翻折感”尤其在深色背景上0 到 1 的变化会让圆点像在“闪烁报警”。呼吸灯建议把透明度限制在0.25 ~ 1之间。也就是说最暗的时候它也不是完全消失而是保持一点存在感最亮的时候也不一定是纯不透明白而是留一点通透。1.3 缩放到底要多大缩放幅度比很多人想象的小。写代码时一激动就写scale(0.5) - scale(1.5)那已经不是呼吸灯是弹力球。呼吸灯的缩放范围一般控制在0.96 ~ 1.06左右。元素小、视觉要求高的时候可以放到1.08 ~ 1.12元素大比如大屏上一个几十像素的数据点缩放幅度反而要更小否则会有跳动感。还有一点容易忽略transform-origin。圆形容器里缩放的默认基点是元素中心但如果你的结构不是正方形或者内部有文字、边框默认基点可能不是你想要的。做圆点呼吸灯时请显式写上transform-origin: center center;这样可以保证缩放是以中心为基准不会从左上角“歪斜”。我见过不少项目圆点呼吸到一半突然往右下角跑就是没设 transform-origin。2. 纯 CSS 实现一个最小可用的呼吸灯2.1 结构怎么搭先给一个最小结构。这里的关键点在于不要把文字和圆点放在同一个可动画元素里否则文字会跟着一起透明度变化用户会看不清。你把状态文字放在外面一层圆点单独做呼吸动画。div classlamp-wrap div classlamp-core/div span classlamp-text待命中/span /div外层容器负责布局内层.lamp-core是一个圆点专门拿来跑透明度/缩放动画。这样做的好处是即使透明度降到 0.25文字仍然是完整清晰的不透明状态不会跟着一起“隐身”。2.2 关键帧写法.lamp-wrap { display: inline-flex; align-items: center; gap: 8px; } .lamp-core { position: relative; width: 24px; height: 24px; border-radius: 50%; background: rgba(56, 189, 248, 0.9); animation: breathe 2.4s ease-in-out infinite; transform-origin: center center; will-change: opacity, transform; } keyframes breathe { 0% { opacity: 0.3; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.06); } 100% { opacity: 0.3; transform: scale(0.96); } }50%对应呼吸的“吸气末”此时透明度最高、体积最大。0%和100%对应“呼气末”透明度最低、体积最小。来回往复就形成了呼吸循环。动画时长2.4s是我自己比较常用的值。成人一分钟呼吸大约 12 到 20 次单次周期 3 到 5 秒但 UI 上如果按这个真实频率做用户会觉得偏慢。前端呼吸灯一般1.8s ~ 2.8s之间比较自然。太快像紧张情绪太慢像卡死。2.3 光晕和阴影怎么加才不卡很多新手会直接在圆点上写一层大大的box-shadow比如box-shadow: 0 0 40px rgba(56, 189, 248, 0.8);box-shadow 在不做动画的时候没问题但如果你想让光晕也跟随呼吸一起变化常见的做法是同时给 box-shadow 也加动画。这个做法在低端设备上会很吃力。box-shadow 变化属于绘制阶段的重计算每帧都改帧率会掉。更稳妥的方式是给圆点加一个伪元素作为光晕层让光晕层用背景渐变代替阴影然后用transform和opacity驱动.lamp-core::before { content: ; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient( circle, rgba(56, 189, 248, 0.5) 0%, rgba(56, 189, 248, 0) 70% ); transform: translate(-50%, -50%) scale(1.8); animation: breatheGlow 2.4s ease-in-out infinite; z-index: -1; } keyframes breatheGlow { 0% { opacity: 0.2; transform: translate(-50%, -50%) scale(1.4); } 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.9); } 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(1.4); } }注意伪元素里的transform同时包含translate(-50%, -50%)和scale(...)。如果漏掉 translate光晕会从左上角开始缩放中心点全乱了。这是一个我见过了不下五次的踩坑点。如果你想要柔化效果可以用filter: blur(...)但注意不要在动画里动态改 blur 的数值那会有性能问题。建议静态 blur 值加动态 opacity/transform视觉上也能有很好的柔光效果。2.4 让它更完整减少动画与主题适配呼吸灯在“待机”状态可以一直动但如果用户开启了系统“减少动态效果”我们应该尊重这个设置。CSS 里有现成的媒体查询media (prefers-reduced-motion: reduce) { .lamp-core, .lamp-core::before { animation: none; } }这样做了之后呼吸灯会变成一盏静态指示灯。在无障碍场景下呼吸动画本身不是问题问题是不能只靠动画表达关键信息。比如“连接成功”这种状态如果旁边没有文字说明只靠灯光呼吸一次用户可能根本注意不到。所以“智能呼吸灯”的智能不只是动画智能还包括对场景、对用户偏好的智能。3. 用 JavaScript 让呼吸灯“聪明”起来3.1 什么时候用 CSS 不够纯 CSS 跑固定循环很方便但产品里往往有多个状态待机要慢一点收到消息要明显一点危险状态要急促一点。用 CSS 实现多套动画也能做只要写几个不同的 class 切换就行但如果你想根据设备实时数据、服务器推送、用户操作来动态调整呼吸频率和深度CSS 动画就会变得很笨重。这时候可以换成 JavaScript 驱动。核心不是用 setInterval 改透明度那会非常卡。正确做法是requestAnimationFrame配合正弦函数算出一帧的透明度和缩放值。3.2 基于 requestAnimationFrame 的核心算法先看核心代码const core document.querySelector(.lamp-core); const state { duration: 2400, minAlpha: 0.25, maxAlpha: 1, minScale: 0.96, maxScale: 1.06, running: true, startTime: performance.now(), }; function update(time) { if (!state.running) return; const progress ((time - state.startTime) % state.duration) / state.duration; const phase progress * Math.PI * 2; const breathe (Math.sin(phase - Math.PI / 2) 1) / 2; const alpha state.minAlpha (state.maxAlpha - state.minAlpha) * breathe; const scale state.minScale (state.maxScale - state.minScale) * breathe; core.style.opacity alpha.toFixed(3); core.style.transform scale(${scale.toFixed(4)}); requestAnimationFrame(update); } requestAnimationFrame(update);这段代码里有一个小细节Math.sin(phase - Math.PI / 2) 1) / 2。如果不减Math.PI / 2动画刚开始时sin(0) 0亮度会从中间位置开始看上去像把呼吸灯从半空中“截断”了。减了Math.PI / 2之后sin(-PI/2) -1加 1 再除以 2 等于 0也就是从“最暗”开始符合我们对呼吸灯从呼气末启动的预期。requestAnimationFrame会在浏览器下次渲染前执行回调能跟屏幕刷新率保持一致。这里只改opacity和transform浏览器会走合成器不会触发重新布局。如果在这个函数里读offsetWidth、getBoundingClientRect就会强制同步布局动画容易掉帧。这是一个很重要的性能习惯。3.3 状态切换与节奏控制把参数抽到 state 对象里的好处就是随时能切换模式function setBreathMode(mode) { if (mode idle) { state.duration 2400; state.minAlpha 0.25; state.maxAlpha 1; state.minScale 0.96; state.maxScale 1.06; } else if (mode notice) { state.duration 1200; state.minAlpha 0.3; state.maxAlpha 1; state.minScale 0.94; state.maxScale 1.1; } else if (mode alert) { state.duration 600; state.minAlpha 0.5; state.maxAlpha 1; state.minScale 0.9; state.maxScale 1.15; } }急促不只是变快还要让最低亮度抬高。这样视觉上会形成一种“紧张”的压迫感。这个思路放在实际项目里很常见同样一个圆点待机时是冷蓝色慢呼吸收到提醒时变成亮橙色快呼吸危险时变成红色高频呼吸。用户不用读文字扫一眼灯光状态就能判断系统发生了什么。完整结合 HTML/CSS/JS 的演示其实就是把上面几个代码块拼在一起。我不建议在页面上同时挂多个requestAnimationFrame多个动画都用同一个update循环管理性能更好逻辑也更清晰。4. 影响范围与工程化经验4.1 哪些场景适合透明度加缩放动画呼吸灯动画的适用范围我筛了一下至少包括下面几类场景推荐周期透明度范围缩放范围注意事项页面按钮提示1.6s0.4 ~ 11 ~ 1.04别遮挡文字弱化光晕消息角标1.2s0.3 ~ 11 ~ 1.08要足够明显可配合位置移动大屏数据点2.4s0.25 ~ 11 ~ 1.1注意性能和批量节点优化智能硬件灯效模拟2.8s0.2 ~ 11 ~ 1.03需要映射到真实灯光亮度同样一套透明度/缩放动画理念在这些场景里的参数差别很大。页面按钮的呼吸灯如果也做到 1.1 倍缩放旁边文字会被挤得“跳起来”观感很差。大屏上如果有几百个数据点每个点都挂独立 animation 和 box-shadow会卡到怀疑人生。参数必须因地制宜。4.2 回答一个搜索热词cst 怎么改变模型透明度这几天很多人在搜“cst怎么改变模型透明度”。先做个区分如果你搜的是“CSS 怎么改变模型透明度”只是把 CSS 打成了 cst那么在网页里最直接的透明度控制有两种。一个是元素整体的透明度用opacity: 0.5它会连带着让所有子元素一起变透明。另一个是背景色或文字颜色的透明度用rgba(0, 0, 0, 0.5)这种方式只改变当前颜色通道不会影响其他子元素的可见度。呼吸灯动画里既有 opacity 控制也有 rgba 控制。核心层用 opacity光晕层用 rgba两者配合视觉层次才丰富。如果你真的用的是 CST Studio Suite 这类建模仿真软件那“模型透明度”是显示样式设置一般在视图窗口选中模型对象然后在对象属性或显示设置里调整透明度。它只影响你看模型的视觉效果不影响仿真计算参数。网页动画里的透明度是纯视觉表达仿真软件里的透明度是操作辅助本质是两个概念。4.3 主题适配和性能检查呼吸灯在深色背景下和浅色背景下参数可能需要分开设计。深色背景可以适当把最小透明度调低一点因为深色不容易让光显得脏浅色背景则要小心透明度太低了会看不见。建议把颜色和透明度都抽取成 CSS 变量.lamp-core { --lamp-alpha-min: 0.25; --lamp-alpha-max: 1; --lamp-color: rgba(56, 189, 248, 0.9); }换主题的时候只改 CSS 变量动画代码不用动。Chrome DevTools 里可以打开 Rendering 面板开启 Paint Flashing观察动画过程中有没有大面积绿色闪烁。大面积闪烁说明触发了重绘需要检查是不是改错了属性。再配合 Performance 面板录制一段动画看帧时间是否稳定在 16ms 左右。5. 常见问题与排查技巧实录5.1 动画不出现或只闪一次我遇到最多的原因是animation-iteration-count没写或者写了但被覆盖了。animation: breathe 2.4s ease-in-out infinite这个简写里最后那个infinite很容易被后面的同名样式覆盖。排查时先在 DevTools 里看 Computed Style如果animation-name为空说明类名没生效或者被覆盖。还有一种情况是元素初始状态为display: none动画不会在元素显示的时候自动重新开始。如果有“隐藏后重新显示”的场景可以考虑给容器加animation的重启逻辑或者在 JS 里手动移除并重新添加 class。5.2 透明度叠加导致背景变暗如果你把opacity设置在父容器上子元素会整体一起透明。文字、边框、背景都会变成半透明看上去像是整块背景变暗了。解决办法是把发光点和文字拆成兄弟节点。发光点自己玩透明度和缩放文字永远保持独立、清晰。还有一种情况是颜色本身用了半透明叠加多层之后会变深比如rgba(0, 0, 0, 0.5)叠两次视觉上会接近 0.75 的黑色不是 0.5。呼吸灯倾向于用亮色光晕这个问题不算大但如果你做暗色阴影效果就要注意叠加问题。5.3 缩放时文字或图标模糊圆形呼吸灯里如果放了小图标缩放倍数超过 1.1 之后图标边缘会发虚。尤其在小尺寸元素上特别明显。解决办法有两个要么缩小缩放幅度要么让圆点本身尺寸大一点比如把 24px 做成 32px边缘抗锯齿会好很多。还可以给元素加transform: translateZ(0)把元素提到独立的合成层让浏览器用 GPU 加速能在一定程度上改善模糊感。但这招不要滥用每个元素都开合成层内存占用会上升。5.4 几个问题速查表现象原因解法动画只跑一次animation-iteration-count 缺失简写里加 infinite圆点从左上角缩放transform-origin 没设设 center center光晕中心点偏移transform 里漏了 translate保留 translate(-50%, -50%)文字跟着半透明opacity 设在父容器拆分成独立的兄弟节点动画掉帧每帧改 box-shadow 或触发 layout改用 opacity/transform 驱动缩放后图标模糊缩放倍数过大、元素太小减小幅度或增大初始尺寸做呼吸灯这件事参数上的克制比炫技重要。我见过很多效果图做得很好看真的落地到产品里用户第一反应是“这个按钮是不是在报警”。透明度不要拉满到 0缩放不要超过 1.1周期不要太短。把这些底限记住你做的呼吸灯至少是自然、舒服的。我自己的习惯是先把透明度调到 0.3 到 1缩放调到 0.96 到 1.06周期定在 2.4 秒然后坐下来盯着它看十秒钟。十秒之内觉得“还有口气活着”参数不用改觉得“是不是卡了”说明太慢觉得“好焦虑”说明太快。呼吸灯的效果判断没有标准答案最终还是要靠眼睛和感受来收尾。