
动效目的
悬浮效果应告诉用户“这里可以点击”,而不是单纯展示动画。位移 2 到 4 像素通常已经足够。
.card { transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(20,49,87,.12); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
键盘 focus-visible 也必须获得同等级别的反馈,触屏设备则不依赖 hover 才能发现入口。