通过transform: translate()与transition结合，可实现鼠标悬浮时卡片平滑上移10px并轻微放大，配合阴影变化增强浮起感，提升交互体验。
在CSS中，通过结合 transform: translate() 和 transition 属性，可以轻松实现卡片在鼠标悬浮时的平滑位移动画。这种效果常用于产品展示、图片墙或导航卡片，增强用户交互体验。
先创建一个简单的卡片结构：
<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 定义过渡，就能快速做出流畅的悬浮动画。不复杂但容易忽略细节，比如过渡属性的选择和时间控制。合理使用，能让界面更有层次感。
以上就是如何在CSS中使用过渡制作卡片悬浮动画_transform translate与transition结合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
472
收藏
