点赞按钮居然还能这么玩❤️？

快跑啊小卢_ - 2022-02-28 10:32:20

---

☀️ 前言前段时间在看一档说唱节目，被里面的一个说唱歌手JBcob的爱之满满这句词给洗脑了。感谢大家对上一篇文章请务必收下这10+个加载特效，保证让你的项目大放异彩⭐的喜爱，于是我就想着怎么让大家点赞感受到爱之满满的感觉呢？于是这次给大家带来一个爱之满满的点赞按钮，让大家在点赞的同时还能感受到被爱包裹的感觉。

?‍♂️ ToDoList[ ] 爱心按钮[ ] 引导点赞

[ ] 爱之满满

⚔️ Just Do It❤️ 爱心按钮

制作一个爱心的方式有很多，可以用图标库的爱心，可以写一个svg，可以用图片，我这里就用伪元素的方式做一个爱心。

<!-- fullLove.html -->
<div  id="likeBtn">
  <span  id="heart"></span>
</div>

/* fullLove.css */
.heart{
  background-color: #8a93a0;
  height: 13px;
  width: 13px;
  transform: rotate(-45deg) scale(1);
  display: inline-block;
}
.heart::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  background-color: inherit;
  border-radius: 50%;
  height: 13px;
  width: 13px;
}
.heart::after {
  content: '';
  position: absolute;
  top: 0;
  right: -50%;
  background-color: inherit;
  border-radius: 50%;
  height: 13px;
  width: 13px;
}

再给外层加一些阴影就可以出来拟态化效果

? 引导点赞

我们需要让按钮做出一些视觉效果来引导观众姥爷们点赞，那持续震动无疑是一种好的选择。

// love.js
const likeBtn = document.getElementById('likeBtn');
const heart=document.getElementById('heart')
likeBtn.addEventListener('mousemove',() => {
heart.classList.add('heratPop')
})
likeBtn.addEventListener('mouseout',() => {
heart.classList.remove('heratPop')
})

/* fullLove.css */
.heratPop{
  animation: pulse 1s linear infinite;
}
@keyframes pulse {
  0% {
          transform: rotate(-45deg) scale(1);
  }
  10% {
          transform: rotate(-45deg) scale(1.1);
  }
  20% {
          transform: rotate(-45deg) scale(0.9);
  }
  30% {
          transform: rotate(-45deg) scale(1.2);
  }
  40% {
          transform: rotate(-45deg) scale(0.9);
  }
  50% {
          transform: rotate(-45deg) scale(1.1);
  }
  60% {
          transform: rotate(-45deg) scale(0.9);
  }
  70% {
          transform: rotate(-45deg) scale(1);
  }
}

? 爱之满满接下来就是最主要的爱之满满了，怎么样才能达到这种效果呢，那必然是越多的爱越好啊。那我们想办法让爱心漂浮在按钮周围，在规定时间内爱心进行位移并消失即可。创建一个元素可以使用document.createElement，移除元素可以使用DOM 的remove()剩下的就简单了，只需要在这个过程中给不同的爱心设置不同的大小和位移即可。

核心代码（完整代码请看文末）：

// love.js
function addHearts(content) {
for(let i=0; i<10; i++) {
  setTimeout(() => {
    const fullHeart = document.createElement('div');
    fullHeart.classList.add('hearts');
    fullHeart.innerHTML = '<span ></span>';
    fullHeart.style.left = Math.random() * 100 + '%';
    fullHeart.style.top = Math.random() * 100 + '%';
    fullHeart.style.transform = `translate(-50%, -50%) scale(${Math.random()+0.3}) `
    fullHeart.style.animationDuration = Math.random() * 2 + 3 + 's';
    fullHeart.firstChild.style.backgroundColor='#ed3056'
    content.appendChild(fullHeart);
    setTimeout(() => {
      fullHeart.remove();
    }, 3000);
  }, i * 100)
}
}

/* fullLove.css */
.hearts {
  position: absolute;
  color: #E7273F;
  font-size: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fly 3s linear forwards;
}
@keyframes fly {
  to {
      transform: translate(-50%, -50px) scale(0);
  }
}

我们来看看最终的效果吧~在线演示地址

? 写在最后首先感谢大家看到这里，这次分享的是爱之满满点赞效果，希望可以帮助到有需要的同学。如果您觉得这篇文章有帮助到您的的话不妨?关注+点赞+收藏+评论+转发?支持一下哟~~?您的支持就是我更新的最大动力。如果想跟我一起讨论和学习更多的前端知识可以加入我的前端交流学习群，大家一起畅谈天下~~~

Tags 标签

前端cssjavascripthtml5less

扩展阅读