关于前端:点赞按钮居然还能这么玩❤️

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

[] 爱心按钮
[] 疏导点赞
[] 爱之满满

⚔️ 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.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 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);
  }
}

咱们来看看最终的成果吧~ 在线演示地址

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

关于前端:点赞按钮居然还能这么玩❤️

☀️ 前言

🦸‍♂️ ToDoList

⚔️ Just Do It

❤️ 爱心按钮

💓 疏导点赞

💕 爱之满满

👋 写在最初