使用 HTML 和 CSS 的脉动心脏动画效果

本文将介绍如何使用 HTML 和 CSS 创造令人惊艳的脉动心脏动画效果。

效果预览

先上一张效果图。

实现方法

要实现脉动心脏动画效果，我们需要使用 CSS3 的 animation 属性和 @keyframes 规则。

首先，我们需要创建一个 HTML 元素来代表心脏，比如 <div>：

<div class="heart"></div>

接着，我们需要为该元素添加样式。具体地，我们需要用 border-radius 属性把元素变成一个“圆角矩形”，然后使用 transform 属性在X轴和Y轴方向上将其“倾斜”。最后，我们还可以添加一些装饰性的边框、阴影之类的样式。

.heart {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 20px auto;
  background: #f00;
  border-radius: 25px 25px 0 0;
  transform: rotate(45deg);
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

现在，我们的心形图案已经完成了。接下来，我们需要添加动画效果。

.heart::before {
  content: "";
  position: absolute;
  top: -26px;
  left: 0;
  width: 50px;
  height: 50px;
  background: #f00;
  border-radius: 50% 50% 0 0;
  transform: rotate(-45deg);
  animation: beat 1s ease-in-out infinite;
}

@keyframes beat {
  from {
    transform: scale(1) rotate(-45deg);
  }
  to {
    transform: scale(1.1) rotate(-45deg);
  }
}

我们在 <div> 元素中添加了一个 ::before 伪元素，然后用 position 属性将其置于 <div> 元素的顶部。接着，我们给它和 <div> 元素一样的样式，不过这一次，我们将 border-radius 属性设置为使它成为一个半圆形。然后，我们用 animation 属性来绑定一个叫做 beat 的动画，这个动画会在1秒钟内将元素的大小从1倍不断放大到1.1倍，再缩小回1倍，接着重复这个过程。

最后，加个优美的过渡，让动画更加流畅：

.heart::before {
  /* 其他代码 */
  transition: all 0.5s ease-in-out;
}

.heart:hover::before {
  transform: scale(1.3);
  box-shadow: 0 0 20px #f00;
}

这里，我们添加了一个 :hover 伪类，当鼠标移到 <div> 元素上时，它的 ::before 伪元素会变得更大，并且产生一个红色的阴影。

到这里，我们的脉动心脏动画效果就完成了！

完整代码

<div class="heart">
  <div class="heart__pulse"></div>
</div>

.heart {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 20px auto;
  background: #f00;
  border-radius: 25px 25px 0 0;
  transform: rotate(45deg);
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: none;
}
.heart::before {
  content: "";
  position: absolute;
  top: -26px;
  left: 0;
  width: 50px;
  height: 50px;
  background: #f00;
  border-radius: 50% 50% 0 0;
  transform: rotate(-45deg);
  animation: beat 1s ease-in-out infinite;
  transition: all 0.5s ease-in-out;
}

.heart:hover::before {
  transform: scale(1.3);
  box-shadow: 0 0 20px #f00;
}

@keyframes beat {
  from {
    transform: scale(1) rotate(-45deg);
  }
  to {
    transform: scale(1.1) rotate(-45deg);
  }
}

结语

通过本文的介绍，希望能够帮助程序员们更好地理解并掌握使用 HTML 和 CSS 创造动画效果的方法。如果你有什么想法或建议，欢迎在评论区留言！