使用Bulma结合CSS可实现卡片悬停放大、阴影变化及3D翻转动画。通过transition和transform属性添加交互反馈，利用perspective与backface-visibility构建翻转效果，提升视觉体验。
使用CSS框架Bulma制作卡片动画效果，可以在保持简洁语义化结构的同时，通过自定义CSS添加生动的交互反馈。Bulma本身不包含JavaScript，因此所有动画效果都可通过纯CSS实现，比如悬停放大、阴影变化、翻转等。
基础卡片结构（Bulma默认样式）
Bulma的卡片组件基于.card容器，包含标题、内容和底部操作区。先构建一个标准卡片：
<div class="card-image">
<figure class="image is-4by3">
<img src="https://via.placeholder.com/300x225" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<p class="title is-4">卡片标题</p>
<p class="subtitle">这里是简短描述</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">分享</p>
<p class="card-footer-item">保存</p>
</footer>
</div>
添加悬停动画效果
为卡片添加平滑的悬停动效，如轻微上浮、阴影增强和缩放。这些提升用户体验的小细节无需JavaScript。
<style>.card {
transition: all 0.3s ease-in-out;
border-radius: 8px;
}
.card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
z-index: 1;
}
</style>
- transition 控制动画缓动效果
- transform 实现位移与缩放
- box-shadow 悬停时加深阴影，营造“浮起”感
进阶：卡片翻转效果
创建正反面翻转的卡片，常用于展示简介与详细信息切换。
立即学习“前端免费学习笔记（深入）”；
HTML结构需包裹双面容器：
<div class="card-flip"><div class="card-inner">
<div class="card-front">
<div class="card">...正面内容...</div>
</div>
<div class="card-back">
<div class="card">...背面内容...</div>
</div>
</div>
</div>
CSS实现3D翻转：
.card-flip {perspective: 1000px;
}
.card-inner {
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
width: 300px;
height: 400px;
}
.card-flip:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}
- perspective 定义3D空间深度
- preserve-3d 保持子元素3D变换
- backface-visibility: hidden 隐藏翻转后背面
基本上就这些。Bulma提供语义清晰的卡片结构，结合自定义CSS动画能轻松实现现代感交互动效。关键在于合理使用 transform、transition 和 3D 属性，让界面更生动又不牺牲性能。
