呼吸灯需用三段式关键帧（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 可访问性要求
