使用HTML和CSS创建动态心形动画

本文将引导您通过HTML和CSS3技术实现一个生动的心形跳动动画。此动画主要依赖于CSS3的@keyframes动画功能，通过调整元素的尺寸、阴影等属性，模拟出心跳的效果。以下是实现该动画的具体步骤和代码：

HTML结构

CSS样式

* {
  margin: 0;
  padding: 0;
}

#background {
  position: relative;
  width: 520px;
  height: 500px;
  background: pink;
  margin: 30px auto;
}

.love {
  width: 300px;
  height: 300px;
  background: #d5083b;
  box-shadow: 0px 0px 40px -4px #d5083b;
}

.love-left,
.love-right,
.love-bottom {
  position: absolute;
  border-radius: 150px;
  background: linear-gradient(to right, #ee0a44 0%, #d5083b 50%);
  transform: scale(1);
  animation: heart-beat 0.6s ease infinite;
}

.love-left {
  top: 0;
  left: 0;
  z-index: 3;
}

.love-right {
  top: 0;
  right: 0;
  z-index: 2;
}

.love-bottom {
  top: 109px;
  left: 110px;
  transform: rotate(45deg) scale(1);
  z-index: 1;
}

@keyframes heart-beat {
  0%, 100% {
    transform: rotate(45deg) scale(1);
    box-shadow: 0px 0px 40px -4px #d5083b;
  }
  50% {
    transform: rotate(45deg) scale(1.1);
    box-shadow: 5px 5px 40px 10px #d5083b;
  }
}

通过上述代码，我们可以创建一个具有动态跳动效果的心形图案，适用于网页设计中表达情感或增加互动性。如果您有任何问题或需要进一步的帮助，请随时留言讨论。