返回

CSS3制作的点赞小动画！马上学起来~

前端

引子：点赞动画，不一样的互动体验

在各种短视频界面上，我们经常会看到类似这样的点赞动画：


以一个红心为基本图案，点中后从中心点不断向外扩散，形成一个涟漪的效果，非常有意思。这种有意思的交互，会让用户更愿意进行互动。

制作纯 CSS 实现点赞动画的巧妙方法

那么，这么有趣的点赞动画，有没有可能使用纯 CSS 实现呢？

那当然是必须的！

本文，就将巧妙地使用 transition 和 animation-fill-mode 等 CSS 属性，一步一步带你制作出这个点赞动画。

关键步骤：分解动画过程

首先，我们需要将点赞动画的过程分解成几个关键步骤：

  1. 准备阶段： 将红心元素置于容器中央，并隐藏。

  2. 点击触发： 用户点击时，将红心元素显示出来。

  3. 动画阶段： 红心元素从中心向外扩散，形成涟漪效果。

  4. 收尾阶段： 动画结束后，将红心元素隐藏。

实现原理：巧用 CSS 动画

接下来，我们就来看看如何使用 CSS 动画来实现这些步骤：

准备阶段：

.heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

点击触发：

.heart:active {
  display: block;
}

动画阶段：

.heart-animation {
  animation: heart-ripple 1s ease-out;
  animation-fill-mode: forwards;
}

@keyframes heart-ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  50% {
    transform: scale(2);
    opacity: 0.5;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}

收尾阶段：

@keyframes heart-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

技巧分享：点缀细节

为了让点赞动画更加生动，我们可以添加一些细节：

  1. 涟漪颜色： 可以使用渐变色来制作涟漪，让它看起来更加自然。

  2. 动画速度： 可以根据自己的喜好调整动画速度，让它更符合你的预期。

  3. 动画次数： 可以设置动画次数为无限，让它一直循环播放。

结语：点赞动画，你学会了吗？

现在，你已经学会了如何使用 CSS3 制作点赞小动画。

赶紧动手试试看吧！