如何在Bootstrap卡片图片右上角添加心形动画？

API 探路者

2026-8-5

在Bootstrap图片右上角添加心形动画的实现方法

核心思路

用相对定位的容器包裹Bootstrap图片，再在容器内加一个绝对定位的心形元素，通过CSS动画实现你要的效果。以下是具体实现代码：

1. HTML结构

<!-- 包裹图片和动画的容器 -->
<div class="img-with-heart">
  <!-- Bootstrap响应式图片 -->
  <img src="你的图片地址" class="img-fluid rounded" alt="示例图片">
  <!-- 心形动画元素 -->
  <span class="heart-animation"></span>
</div>

2. CSS样式

/* 容器设置相对定位，让心形元素可以相对于它定位 */
.img-with-heart {
  position: relative;
  display: inline-block; /* 让容器宽度适配图片 */
}

/* 心形样式 */
.heart-animation {
  position: absolute;
  top: 10px; /* 调整距离顶部的位置 */
  right: 10px; /* 调整距离右侧的位置 */
  width: 30px;
  height: 30px;
  background-color: #ff4d6d;
  transform: rotate(-45deg);
  animation: heartbeat 1.5s infinite;
}

/* 心形的左右两个半圆 */
.heart-animation::before,
.heart-animation::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #ff4d6d;
  border-radius: 50%;
}

.heart-animation::before {
  top: -15px;
  left: 0;
}

.heart-animation::after {
  top: 0;
  right: -15px;
}

/* 心跳动画 */
@keyframes heartbeat {
  0% {
    transform: rotate(-45deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(-45deg) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: rotate(-45deg) scale(1);
    opacity: 1;
  }
}

3. 效果扩展

如果想要类似"弹出后消失"的动画效果，可以替换上面的@keyframes部分：

@keyframes popHeart {
  0% {
    transform: rotate(-45deg) scale(0);
    opacity: 0;
  }
  50% {
    transform: rotate(-45deg) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) scale(0);
    opacity: 0;
  }
}

然后把.heart-animation的animation属性改成popHeart 2s infinite;即可。