呼吸灯动画需用@keyframes定义opacity与scale双变化，配合transform-origin: center、ease-in-out缓动、infinite循环及forwards填充模式，按钮须配border-radius和背景阴影才具“灯”观感。
用 @keyframes 实现按钮呼吸缩放动画
直接上核心：呼吸灯本质是透明度 + 缩放的循环变化，不是真“发光”，别被名字带偏。关键在 @keyframes 定义两个状态点，再用 animation 绑定到按钮上。
常见错误是只调 opacity 忘了缩放，或者用 transform: scale(1.05) 但没设 transform-origin，导致按钮晃动或偏移。
-
@keyframes breathe起点设为opacity: 0.6; transform: scale(0.95)，终点设为opacity: 1; transform: scale(1) - 必须加
transform-origin: center，否则缩放会以左上角为基点，视觉错乱 - 动画时长建议 2s–3s，太短像抽搐，太长看不出呼吸感；
animation-iteration-count: infinite才能持续
animation 属性写全才能生效
只写 animation: breathe 2.5s 是不够的——浏览器默认不循环、不匀速、不保持最终状态。呼吸效果卡在最后帧就废了。
完整写法必须包含四要素：name、duration、timing-function、iteration-count，缺一不可。
-
animation: breathe 2.5s ease-in-out infinite——ease-in-out让进出更自然，硬用linear会像机械钟摆 - 别漏
animation-fill-mode: forwards，否则鼠标悬停时动画可能重置回起点 - 如果按钮有 hover 效果，记得在
:hover里覆盖animation-play-state: paused，不然用户点不到按钮
按钮本身要配 border-radius 和背景色才像“灯”
纯文字按钮加呼吸动画，看起来就是抖，不是灯。呼吸灯的观感依赖圆角+渐变/纯色背景+阴影。
没有视觉聚焦点，动画再准也白搭。
- 至少加
border-radius: 50%（圆形）或border-radius: 8px（圆角矩形），避免直角割裂感 - 背景推荐深色底+亮色按钮，比如
background: #4f46e5配box-shadow: 0 0 12px rgba(79, 70, 229, 0.5)，模拟光晕 - 慎用
background: linear-gradient配呼吸动画——颜色变化会和缩放冲突，容易眼花
移动端点击区域小？加 transform: scale() 别动 width/height
缩放动画如果用 width 和 height 变化，会触发页面重排（reflow），iOS Safari 上卡顿明显，而且点击热区不会跟着变大。
所有缩放必须走 transform: scale()，它只触发重绘（repaint），性能好，且点击区域实时同步。
- 绝对不要在
@keyframes里写width: 102%这类属性 - 如果按钮父容器用了
display: inline-block，缩放后可能换行，加vertical-align: middle稳住位置 - 真机调试时打开 Safari 的“开发者 > 显示绘制区域”，看缩放是否引发大面积红色闪烁——有就是重排了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
