用CSS实现长按点赞累积动画

2023-11-05 07:15:33

在日常生活中，我们经常在一些社交媒体或视频平台上看到长按点赞的功能。当用户长按点赞按钮时，会出现一个累积点赞的动画效果，让人感觉更加有趣和有互动性。本文将介绍如何使用CSS实现长按点赞累积动画。

1. HTML结构

首先，我们需要创建一个HTML结构来定义点赞按钮和其他相关元素。

<div class="container">
  <button class="like-button">
    <span class="like-text">0</span>
    <i class="fas fa-heart"></i>
  </button>
</div>

container：包含点赞按钮的容器。
like-button：点赞按钮。
like-text：点赞数字。
fa-heart：点赞图标。

2. CSS样式

接下来，我们需要使用CSS来定义样式。

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.like-button {
  width: 50px;
  height: 50px;
  border: none;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.like-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: bold;
}

.fa-heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: #ff0000;
}

.like-button:active .like-text {
  animation: like-text-animation 0.5s ease-in-out forwards;
}

@keyframes like-text-animation {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.5);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

container：设置容器的样式，使其居中显示。
like-button：设置点赞按钮的样式，使其圆形并带有阴影。
like-text：设置点赞数字的样式，使其居中显示。
fa-heart：设置点赞图标的样式，使其居中显示。
like-button:active .like-text：当点赞按钮处于激活状态时，应用点赞数字的动画效果。
like-text-animation：定义点赞数字动画的keyframes。

3. JavaScript

最后，我们需要使用JavaScript来实现长按点赞的功能。

const likeButton = document.querySelector('.like-button');
let likeCount = 0;

likeButton.addEventListener('mousedown', () => {
  likeButton.classList.add('active');
  likeCount++;
  likeButton.querySelector('.like-text').textContent = likeCount;
});

likeButton.addEventListener('mouseup', () => {
  likeButton.classList.remove('active');
});