底部固定呼吸灯需用@keyframes实现opacity与box-shadow协同动画（0.6→1.0→0.6，3.2s ease-in-out），避开软键盘遮挡需JS动态切换fixed/absolute定位，慎用will-change，兼顾色弱用户应叠加图标缩放与文字加粗。
用 CSS @keyframes 实现底部固定条呼吸灯效果
直接加 position: fixed + 动画即可，不需要 JS。关键在动画节奏和透明度变化要平滑，否则像“抽搐”而不是呼吸。
常见错误是只改 opacity，但人眼对亮度变化更敏感，建议配合 box-shadow 或背景色轻微浮动：
-
opacity从0.6→1.0→0.6（避免全透明，否则提示消失） - 加一层微弱的
box-shadow: 0 0 8px rgba(255, 105, 180, 0.4)，随 opacity 同步变化 - 动画时长设为
3.2s—— 太短像闪烁，太长不醒目；用ease-in-out模拟自然起伏
@keyframes breathe {
0%, 100% { opacity: 0.6; box-shadow: 0 0 8px rgba(255, 105, 180, 0.4); }
50% { opacity: 1.0; box-shadow: 0 0 16px rgba(255, 105, 180, 0.7); }
}
底部固定定位必须避开移动端输入框遮挡
很多页面在 iOS Safari 或安卓 Chrome 中，唤起软键盘后，fixed 元素会被顶到视口上方甚至消失——这不是动画问题，是 viewport 行为差异。
解决方法不是禁用 fixed，而是用 JS 监听 focus/blur 动态切 position：
- 输入框获得焦点时，将悬浮条
position改为absolute，并用bottom手动设为env(safe-area-inset-bottom)+ 预留高度（如60px） - 失去焦点后切回
fixed和bottom: 0 - 纯 CSS 方案（不推荐）：用
viewport-fit=cover+env(safe-area-inset-bottom)，但部分安卓机型不支持
will-change: opacity 要谨慎加
有人一看到动画就加 will-change: opacity，但在低端安卓机或旧版 iOS 上反而引发重绘卡顿，尤其当底部条含文字或图标时。
实测有效条件只有两个：
- 动画持续运行（不停止），且仅作用于 opacity / transform
- 该元素不频繁增删、不参与复杂布局计算（比如没用
flex或grid父容器动态调整）
否则直接去掉 will-change，性能更稳。现代浏览器对 opacity 动画优化已足够好。
颜色与可访问性冲突容易被忽略
呼吸灯常用粉/紫/蓝，但色弱用户（尤其是蓝黄觉异常）可能完全看不出明暗变化。不能只依赖 opacity 动效。
补救措施很简单：
- 在闪烁最亮帧（
50%）加一个极简图标，比如●或 SVG 微型脉冲波形，用scale(1.1)同步放大 - 文字提示同步加粗：
font-weight: 600，而非只靠视觉闪烁 - 提供关闭开关，保存到
localStorage，下次进入自动禁用动画
真正难的不是让灯“呼吸”，而是让不同设备、不同视力、不同交互状态下的用户都感知到提示存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
