css框架Bulma制作卡片动画效果-css教程-PHP中文网

css框架Bulma制作卡片动画效果

P粉602998670

发布： 2025-10-16 09:06:01

原创

941人浏览过

使用Bulma结合CSS可实现卡片悬停放大、阴影变化及3D翻转动画。通过transition和transform属性添加交互反馈，利用perspective与backface-visibility构建翻转效果，提升视觉体验。

css框架bulma制作卡片动画效果

使用CSS框架Bulma制作卡片动画效果，可以在保持简洁语义化结构的同时，通过自定义CSS添加生动的交互反馈。Bulma本身不包含JavaScript，因此所有动画效果都可通过纯CSS实现，比如悬停放大、阴影变化、翻转等。

基础卡片结构（Bulma默认样式）

Bulma的卡片组件基于.card容器，包含标题、内容和底部操作区。先构建一个标准卡片：

<div class="card" style="width: 300px;">
  <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。

transition 控制动画缓动效果
transform 实现位移与缩放
box-shadow 悬停时加深阴影，营造“浮起”感

进阶：卡片翻转效果

创建正反面翻转的卡片，常用于展示简介与详细信息切换。

立即学习“前端免费学习笔记（深入）”；

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

HTML结构需包裹双面容器：

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);
}