通过css的transform和transition实现卡片悬停升起效果，首先设置.card基础样式并添加transition过渡，再利用.card:hover时的transform: translateY(-10px)使卡片上移，同时增强box-shadow立体感，配合ease缓动与will-change优化性能，形成平滑自然的动画。
让卡片在鼠标悬停时平滑升起，主要通过 CSS 的 transform 和 transition 属性实现。核心思路是利用 translateY 提升元素位置，并配合过渡效果营造自然的动画感。
基础结构与默认样式
先构建一个简单的卡片结构：
<div class=”card”>
<h3>标题</h3>
<p>这是一段描述内容</p>
</div>
设置基本样式，包括阴影和过渡：
.card {
padding: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
添加 Hover 升起效果
当鼠标悬停时，让卡片向上移动并增强阴影，模拟“升起”感：
立即学习“前端免费学习笔记（深入）”；
.card:hover {
transform: translateY(-10px);
box-shadow: 0 16px 24px rgba(0,0,0,0.15);
}
说明：
– translateY(-10px)：向上移动 10 像素
– 增强 box-shadow：加深且拉长阴影，增强立体感
– ease 缓动函数：使动画更自然，类似物理弹跳的加速度
优化细节提升质感
可进一步微调体验：
- 使用 will-change: transform 提示浏览器提前优化动画性能
- 调整 transition-timing-function 为
cubic-bezier(0.25, 0.8, 0.25, 1)获得更细腻的缓动 - 给父容器设置 overflow: hidden 防止位移导致布局抖动
基本上就这些。关键是 transform 位移 + 过渡 + 阴影变化三者结合，就能实现自然的升起动效。