纯css悬停效果可用transition+transform+box-shadow实现，scss变量统一管理参数；transform位移宜用百分比适配不同尺寸，需父容器设高度；box-shadow推荐现代rgb写法并可叠加内阴影；timing-function应按动效意图选择，禁用transition:all，注意backdrop-filter兼容性问题。
直接用 transition + transform + box-shadow 组合就能实现高质量悬停效果，不需要 JS，也不必套用复杂框架。SCSS 的价值在于把重复参数抽成变量，方便批量调整节奏、颜色和位移量。
hover 触发的 transform 位移必须用百分比单位
固定像素值（如 translateY(-8px)）在不同尺寸卡片上表现不一致；用百分比（translateY(-5%)）能自动适配容器高度，视觉更统一。注意：父容器需有明确高度（height 或 min-height），否则百分比计算失效。
-
transform: translateY(-5%)比margin-top: -5px更高效，不触发重排 - 避免同时写
transform: scale(1.02) translateY(-5%)，应合并为单条声明，防止浏览器解析歧义 - 移动端无 hover 状态，记得加
@media (hover: hover)媒体查询做条件包裹
box-shadow 动效的关键是模糊半径与透明度协同
阴影太实显得生硬，太虚又失去立体感。推荐组合：box-shadow: 0 4px 12px rgb(0 0 0 / 12%) —— 其中 4px 是偏移量控制“浮起高度”，12px 是模糊半径决定柔和度，rgb(0 0 0 / 12%) 用现代 color 函数写法确保透明度可控且可被 SCSS 变量接管。
- 别用
rgba(0,0,0,0.12)，它在深色模式下可能反显异常 - 多个阴影叠加（如加一层内阴影
inset 0 2px 4px rgb(255 255 255 / 8%)）能强化玻璃感，但会轻微增加渲染开销 - SCSS 中建议定义
$shadow-hover: 0 4px 12px rgb(0 0 0 / 12%)，后续所有卡片复用
transition 的 timing-function 别硬套 cubic-bezier(0.25, 0.8, 0.25, 1)
这个贝塞尔曲线是“标准缓动”，但对卡片上浮来说略显拖沓。实测 cubic-bezier(0.34, 1.56, 0.64, 1)（带轻微过冲）更轻盈，而 ease-out 在快速悬停离开时响应更干脆。关键是要匹配动效意图：
- 上浮（
translateY）用ease-out或带过冲的自定义曲线 - 缩放（
scale）用ease-in-out避免头重脚轻 - 阴影变化（
box-shadow）用ease即可，人眼对它的节奏不敏感 - 所有 transition 属性必须显式列出，禁用
transition: all .3s，否则意外属性变更也会动画
真正容易被忽略的是 backdrop-filter 和 perspective 的叠加干扰——一旦卡片用了 backdrop-filter: blur(10px)，再加 transform: translateY() 可能导致边缘锯齿或渲染闪烁，此时必须给父容器加 will-change: transform 或改用 translateZ(0) 强制硬件加速。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
