只用CSS代码让心动起来！打动ta从一个小小心❤开始~

2024-02-23 00:28:40

纯CSS绘就悸动之心，用真情温暖ta的心田！

先说一下整体思路，我们要做出动画效果首先想到的就是动画关键帧，而心形形状其实就是三个椭圆组成的（这我也不知道我以前学过所以就知道了），所以我们可以分别做一个椭圆，然后对其添加动画，最后组合成一个心形。

<div class="heart">
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
</div>

.heart {
  width: 100px;
  height: 100px;
  position: relative;
}

.left, .right, .bottom {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
}

.left {
  left: 0;
  top: 0;
}

.right {
  right: 0;
  top: 0;
}

.bottom {
  left: 25px;
  bottom: 0;
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.heart:hover .left, .heart:hover .right, .heart:hover .bottom {
  animation: beat 1s infinite alternate;
}

大家觉得这个心是跳动的吗？

当然，我们还可以添加一些更复杂的效果，比如让心形改变颜色、旋转、闪烁等，这样就会更加生动。

@keyframes colorChange {
  0% {
    background-color: #ff0000;
  }
  50% {
    background-color: #ffffff;
  }
  100% {
    background-color: #ff0000;
  }
}

.heart:hover .left, .heart:hover .right, .heart:hover .bottom {
  animation: beat 1s infinite alternate, colorChange 2s infinite alternate;
}