☀️ 前言

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

♂️ ToDoList

  • [ ] 爱心按钮
  • [ ] 疏导点赞

  • [ ] 爱之满满

    ⚔️ Just Do It

    ❤️ 爱心按钮

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

    <!-- fullLove.html --><div class="likeBtn" id="likeBtn">  <span class="heart" 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.jsconst 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.jsfunction addHearts(content) {for(let i=0; i<10; i++) {  setTimeout(() => {    const fullHeart = document.createElement('div');    fullHeart.classList.add('hearts');    fullHeart.innerHTML = '<span class="heart"></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);  }}
  • 咱们来看看最终的成果吧~在线演示地址

写在最初

  • 首先感激大家看到这里，这次分享的是爱之满满点赞成果，心愿能够帮忙到有须要的同学。
  • 如果您感觉这篇文章有帮忙到您的的话无妨关注+点赞+珍藏+评论+转发反对一下哟~~您的反对就是我更新的最大能源。
  • 如果想跟我一起探讨和学习更多的前端常识能够退出我的前端交流学习群，大家一起畅谈天下~~~