呼吸灯需用三段式关键帧（0%→50%→100%）打牢节奏基础，叠加opacity、transform和box-shadow实现立体呼吸感，并通过animation-delay错峰群组动画，兼顾GPU加速与prefers-reduced-motion可访问性降级。

用三段式关键帧打牢呼吸节奏基础

呼吸灯不是简单地“变亮再变暗”，而是要有吸气、饱满、呼气的自然过程。0%→50%→100% 的三段写法比两段更稳：0% 是起始态（微暗+略小），50% 是峰值（最亮+最大），100% 回到起始态，首尾一致才能无缝循环。如果只写 0% 和 100%，动画在衔接处容易发卡或跳帧。

叠加 opacity、transform 和 box-shadow 增强立体感

单调改透明度会显得扁平，真实呼吸灯需要多维变化协同：

• opacity 控制明暗层次，建议范围 0.2–1，避免设为 0（会导致元素不可见且可能影响渲染）
• transform: scale() 模拟体积起伏，常用 0.95→1.05 或 0.98→1.02，幅度不宜过大，否则像弹跳
• box-shadow 营造光晕扩散，比如从 0 0 15px #00bcd4 过渡到 0 0 40px #00bcd4，增强呼吸外溢感

用 animation-delay 错峰实现群组呼吸效果

多个呼吸灯同时闪烁会显得机械。给每个元素加不同 animation-delay 就能轻松错开节奏：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 合法使用负值，例如 animation-delay: -0.8s，让动画提前启动
• 不必统一 duration，按钮可设 1.6s（响应快），背景装饰用 2.4s 或 4s（更舒缓）
• 避免用小数毫秒（如 1250.5ms），部分浏览器渲染会微抖

兼顾性能与可访问性不能省

呼吸灯是视觉提示，不是炫技工具：

• 只用 opacity 和 transform，它们走 GPU 加速，不触发重排
• 禁用 visibility: hidden 或 display: none，它们会中断动画；真要停用，应切换 class 移除 animation
• 必须加 @media (prefers-reduced-motion: reduce) 降级规则，例如 animation: none，满足 WCAG 可访问性要求

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！