最简实现按钮悬停缩放+阴影动效：用 transform: scale(1.05) 和 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 配合 transition: all 0.2s ease，兼顾轻量、顺滑与可点击感知。

按钮悬停时缩放+阴影变化最简实现

直接用 transform 和 box-shadow 配合过渡，不依赖 JS 就能做出轻量又顺滑的动效。关键不是“炫”，而是让用户明确感知到可点击状态。

• transform: scale(1.05) 比 scale(1.2) 更克制，避免布局跳动
• 阴影必须同时改 box-shadow 的模糊半径和偏移量，单改颜色会显得僵硬
• 过渡时间统一设为 transition: all 0.2s ease，比 cubic-bezier 更稳妥，尤其在低性能设备上

button {
  transition: all 0.2s ease;
}
button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

点击反馈用 :active 而非 JavaScript 模拟

移动端真机上，:active 伪类默认延迟约 300ms，必须加 touch-action: manipulation 才能即时响应。否则用户点下去没反馈，会下意识连点两次。

• 不要用 onclick 绑定空函数来“激活” :active，无效
• :active 中只改视觉属性（如 transform: scale(0.98)、opacity），避免触发布局重排
• 若需兼容 iOS Safari 旧版本，得额外加 -webkit-tap-highlight-color: transparent

文字描边动画容易卡顿的真正原因

用 text-shadow 做呼吸或描边动画时，如果帧率掉到 30fps 以下，人眼会明显察觉闪烁。这不是 CSS 写法问题，而是渲染管线瓶颈。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

• 避免同时对多个按钮批量启用 text-shadow 动画，优先用单个关键按钮
• 动画只作用于 color 或 opacity，比 text-shadow 更省 GPU 资源
• 真要描边动效，改用 background-clip: text + text-fill-color: transparent，再配合 background-image: linear-gradient() 动画，更稳定

深色模式下按钮动画的对比度陷阱

很多动效在浅色背景看着很酷，切到深色模式后文字几乎看不见——不是动画失效，是颜色值没适配。

立即学习“前端免费学习笔记（深入）”；

• 别写死 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，换成 rgba(var(--shadow-rgb), 0.15) 配合 CSS 变量
• :hover 的缩放效果在深色模式下若搭配高饱和主色，容易造成视觉过载，建议同步降低 filter: brightness(0.95)
• 动画持续时间在深色模式下可略缩短（如 0.18s），因为暗背景下人眼对运动更敏感

实际项目里，最常被忽略的是动画触发时机和取消机制——比如鼠标快速划过一排按钮时，未完成的 transition 会堆积，导致后续悬停延迟。加一句 transition-property: transform, box-shadow, opacity 明确限定属性，比全写 all 更可靠。