17370845950

通过CSS的transform和transition实现卡片悬停升起效果，首先设置.card基础样式并添加transition过渡，再利用.card:hover时的transform: translateY(-10px)使卡片上移，同时增强box-shadow立体感，配合ease缓动与will-change优化性能，形成平滑自然的动画。

让卡片在鼠标悬停时平滑升起，主要通过 CSS 的 transform 和 transition 属性实现。核心思路是利用 translateY 提升元素位置，并配合过渡效果营造自然的动画感。

基础结构与默认样式

先构建一个简单的卡片结构：

设置基本样式，包括阴影和过渡：

添加 Hover 升起效果

当鼠标悬停时，让卡片向上移动并增强阴影，模拟“升起”感：

说明：
- translateY(-10px)：向上移动 10 像素
- 增强 box-shadow：加深且拉长阴影，增强立体感
- ease 缓动函数：使动画更自然，类似物理弹跳的加速度

优化细节提升质感

可进一步微调体验：

• 使用 will-change: transform 提示浏览器提前优化动画性能
• 调整 transition-timing-function 为 cubic-bezier(0.25, 0.8, 0.25, 1) 获得更细腻的缓动
• 给父容器设置 overflow: hidden 防止位移导致布局抖动

基本上就这些。关键是 transform 位移 + 过渡 + 阴影变化三者结合，就能实现自然的升起动效。