按钮:active无动画的根本原因是transition未写在默认状态、:active顺序错误、touch-action:none禁用或动画属性选择不当；应将transition声明在默认类上，按link→visited→hover→active顺序书写，用transform+box-shadow实现下沉反馈，并通过devtools触屏模式验证:active是否生效。
按钮点击没反馈，不是样式写得少，而是:active根本没生效，或者过渡逻辑落在了错误的属性上。
为什么:active加了transition还是没动画
常见现象是鼠标按下去按钮颜色一跳就回弹，或完全不动——这通常是因为:active规则被覆盖、未触发，或你把transition写在了:active里而非默认状态。
-
:active必须写在:hover之后，否则:hover会压住它（顺序：:link → :visited → :hover → :active） -
transition必须声明在默认状态（比如.btn），不能只写在.btn:active里，否则按下瞬间无缓动 - 父容器写了
touch-action: none会彻底禁用:active，尤其在轮播、弹窗、移动端框架里很常见 - 别用
transition: all 0.1s，万一哪天加了font-size或opacity，动画会意外参与；明确写transition: transform 0.1s ease, box-shadow 0.1s ease
下沉效果必须用transform: translateY() + box-shadow配合
单靠改背景色或边框色，用户感知弱，还对色盲不友好。真正有“按进去”感的，是位移+阴影的协同变化。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 默认状态设
box-shadow: 0 2px 4px rgba(0,0,0,0.2)模拟轻微凸起 -
:active里写transform: translateY(2px)+box-shadow: 0 4px 8px rgba(0,0,0,0.25)，y偏移和模糊半径同步增大 - 移动端要加
-webkit-tap-highlight-color: transparent，否则点击闪白盖过反馈 - 避免在
:active里改background-color——颜色变化慢，人眼延迟明显；位移和阴影响应更快
圆点类单选按钮的过渡必须绕开input本身
原生input[type="radio"]不支持transition，也不支持伪元素，所有动画必须落在label或它的::before/::after上。
- HTML结构必须是
<input type="radio"><label>选项</label>，且input紧邻label之前 -
input设为display: none，视觉完全隐藏 - 给
label加transition: background-color 0.25s ease, border-color 0.25s ease - 用
input:checked + label控制选中态样式，比如background-color: #4285f4 - 如果要做圆点缩放动画，得在
label::before上画，默认transform: scale(0.7)，input:checked + label::before里改成scale(1)
真正难的不是写出几行CSS，而是确认浏览器是否真把:active识别成了激活态——打开DevTools的Emulation面板，切到触屏模式点几下，看Styles里:active规则前的勾有没有亮起。很多“没效果”的问题，卡在这一步就结束了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
