如何通过css实现卡片hover升起动画
P粉602998670
发布： 2025-10-18 15:25:01
原创
316人浏览过
通过CSS的transform和box-shadow配合transition实现卡片悬停升起效果，先设置卡片基础样式并添加过渡动画，再利用translateY(-10px)实现上移、增大box-shadow增强立体感，可选scale(1.02)轻微放大并配合z-index确保层级，从而完成平滑自然的悬停举起动画。
卡片在鼠标悬停时“升起”是一种常见且直观的交互效果，能提升页面的立体感和用户反馈。通过 CSS 的 transform 和 box-shadow 配合 transition，可以轻松实现这种 hover 举起动画。
1. 基础卡片结构
先定义一个简单的卡片 HTML 结构：
<div class="card"><h3>卡片标题</h3>
<p>这里是卡片内容。</p>
</div>
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 增强层次。不复杂但容易忽略细节，比如阴影和动效时间的协调。
以上就是如何通过css实现卡片hover升起动画的详细内容，更多请关注php中文网其它相关文章！
最佳 Windows 性能的顶级免费优化软件
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
来源：php中文网
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
-
2025-11-04 16:19:33
-
2025-11-04 16:17:55
-
2025-11-04 16:16:02
-
2025-11-04 16:16:02
-
2025-11-04 16:14:02
-
2025-11-04 16:12:25
-
2025-11-04 16:11:14
-
2025-11-04 16:11:02
-
2025-11-04 16:11:02
-
2025-11-04 16:10:03
最新问题
CSS属性简写和完整写法的区别是什么_常用简写属性示例讲解
简写属性通过合并多个子属性减少代码量，提高可读性，但可能重置未显式声明的子属性为默认值；完整写法则逐项设置，更明确但冗长。1.margin和padding按上右下左顺序支持1~4个值的简写；2.border简写需同时定义宽度、样式、颜色，适用于四边相同场景；3.font简写需遵循特定顺序且必须包含font-size和font-family；4.background简写可配置图像、重复、位置、尺寸和颜色等，但修改单一属性时建议用完整写法以避免覆盖其他设置。合理使用简写能提升效率，但需注意默认值风险
2025-11-05 14:06:02
592
热门推荐
广告
收藏
