通过CSS的transform和box-shadow配合transition实现卡片悬停升起效果，先设置卡片基础样式并添加过渡动画，再利用translateY(-10px)实现上移、增大box-shadow增强立体感，可选scale(1.02)轻微放大并配合z-index确保层级，从而完成平滑自然的悬停举起动画。
卡片在鼠标悬停时“升起”是一种常见且直观的交互效果，能提升页面的立体感和用户反馈。通过 CSS 的 transform 和 box-shadow 配合 transition，可以轻松实现这种 hover 举起动画。
1. 基础卡片结构
先定义一个简单的卡片 HTML 结构：
卡片标题
这里是卡片内容。
2. 默认样式设置
给卡片设置基础样式，包括圆角、阴影和过渡动画：
立即学习“前端免费学习笔记（深入）”；
.card {
background: white;
border-radius: 12px;
padding: 20px;
width: 300px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
3. Hover 举起效果
当鼠标悬停时，让卡片“升起”，主要通过两个方式实现：
-
提升 Z 轴位移：使用
transform: translateY(-10px)让卡片向上移动，模拟抬起 - 增强阴影：加大 box-shadow 模拟更强的光影，突出立体感
transform: translateY(-10px);
box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}
4. 可选优化：添加轻微缩放
若想更生动，可加入轻微放大效果：
.card:hover {transform: translateY(-10px) scale(1.02);
box-shadow: 0 12px 20px rgba(0,0,0,0.15);
z-index: 1;
}
注意：scale(1.02) 略微放大卡片，视觉上更聚焦。配合 z-index: 1 可确保升起时在其他元素之上。
基本上就这些。关键点是 transition 平滑过渡，transform 制造位移，box-shadow 增强层次。不复杂但容易忽略细节，比如阴影和动效时间的协调。
