有机猴灬残暴SamaLife · Code · Explore
返回笔记
QUICK NOTE

卡片悬浮动效的克制用法

用位移、阴影和边框变化提供反馈,同时避免页面到处晃动。

动效目的

悬浮效果应告诉用户“这里可以点击”,而不是单纯展示动画。位移 2 到 4 像素通常已经足够。

CODE
.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 才能发现入口。