通过transform: translate()与transition结合，可实现鼠标悬浮时卡片平滑上移10px并轻微放大，配合阴影变化增强浮起感，提升交互体验。
在CSS中，通过结合 transform: translate() 和 transition 属性，可以轻松实现卡片在鼠标悬浮时的平滑位移动画。这种效果常用于产品展示、图片墙或导航卡片，增强用户交互体验。
基本结构：HTML卡片容器
先创建一个简单的卡片结构：
<div class="card"> <h3>卡片标题</h3> <p>这里是卡片内容。</p> </div>
基础样式：设置卡片外观
为卡片设置基本样式，包括尺寸、边框、阴影和定位方式，便于后续动画控制：
.card {
width: 200px;
height: 250px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 20px;
text-align: center;
position: relative; /* 启用定位 */
cursor: pointer;
}
添加过渡与位移动画
使用 transition 定义变化过程，并在 :hover 状态下通过 transform: translate() 实现位移：
.card {
transition: transform 0.3s ease;
}
<p>.card:hover {
transform: translate(0, -10px); /<em> 向上移动10像素 </em>/
}</p>说明：
-
transition: transform 0.3s ease;表示所有对transform的修改都会以0.3秒的缓动动画执行。 -
translate(0, -10px)第一个值是X轴偏移（水平），第二个是Y轴（垂直）。负值表示向上移动。 - 动画只作用于
transform属性，不会影响文档流，避免页面抖动。
进阶优化：配合其他效果增强视觉反馈
可以同时加入阴影加深或缩放微调，让动画更自然：
.card {
transition: all 0.3s ease;
}
<p>.card:hover {
transform: translate(0, -10px) scale(1.02);
box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}</p>提示： 使用 scale(1.02) 轻微放大卡片，配合位移能营造“浮起”感，但注意不要过度夸张，以免影响用户体验。
基本上就这些。只要掌握 transform 控制位移、transition 定义过渡，就能快速做出流畅的悬浮动画。不复杂但容易忽略细节，比如过渡属性的选择和时间控制。合理使用，能让界面更有层次感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
