[分享]css双击点赞动画效果

在网站中，点赞功能是很常见的一个交互设计。但是，如果只能静态地展示点赞信息，可能会让用户感到有些枯燥，无法吸引他们的兴趣。这时，我们可以通过一个动态的点赞效果来增强用户体验。下面，我们就来介绍一种使用...

在网站中，点赞功能是很常见的一个交互设计。但是，如果只能静态地展示点赞信息，可能会让用户感到有些枯燥，无法吸引他们的兴趣。

这时，我们可以通过一个动态的点赞效果来增强用户体验。下面，我们就来介绍一种使用CSS实现的双击点赞动画效果。

//HTML代码
<span class="heart"></span>

//CSS代码
.heart {
  animation: animateHeart 0.8s ease-in-out;
  transform: scale(1);
  background-color: #F44336;
  height: 100px;
  width: 100px;
  position: absolute;
  top: -25px;
  left: -25px;
  border-radius: 50%;
}

.heart:before,
.heart:after {
  content: "";
  background-color: #F44336;
  border-radius: 50%;
  position: absolute;
}

.heart:before {
  width: 100px;
  height: 100px;
  top: -50px;
  left: 0px;
}

.heart:after {
  width: 100px;
  height: 100px;
  top: 0px;
  left: -50px;
}

@keyframes animateHeart {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(0.9);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.9);
  }
  80% {
    transform: scale(1);
  }
} 

首先，在HTML代码中，我们需要一个空的标签来作为点赞的按钮，这里我们使用了标签，并添加了一个class名为“heart”。

接下来，在CSS代码中，我们设置了一系列的属性。其中，使用了animation属性来实现心形图标的运动效果，使用了transform和position属性来定位和变换图标的大小。

我们还声明了两个:before和:after伪元素，作为心形图标的两侧。通过background-color属性来改变它们的颜色，并使用border-radius属性将它们变成圆形。

最后，我们使用了@keyframes来定义了一个名为animateHeart的动画，用于控制点赞图标的放大和缩小。在具体实现中，我们使用了scale属性来改变图标的大小，并在动画过程中，设置了不同的时间比例来可视化出心脏跳动的节奏。

这样，我们就实现了一个通过CSS来实现的双击点赞动画效果。用户在点击点赞按钮时，会出现一个可爱的心形图标，并有点赞图标放大缩小的动态效果，使用户的体验更加有趣和生动。