CSS+JS实现爱心点赞按钮（代码示例）-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

CSS+JS实现爱心点赞按钮（代码示例）

本篇文章给大家介绍一下CSS+JS实现一个“爱之满满”点赞按钮的方法，希望对大家有所帮助！

前段时间在看一档说唱节目，被里面的一个说唱歌手JBcob的爱之满满这句词给洗脑了。

于是这次给大家带来一个爱之满满的点赞按钮，让大家在点赞的同时还能感受到被爱包裹的感觉。

ToDoList爱心按钮引导点赞爱之满满Just Do It❤️ 爱心按钮制作一个爱心的方式有很多，可以用图标库的爱心，可以写一个svg，可以用图片，我这里就用伪元素的方式做一个爱心。（学习视频分享：css视频教程）

<!-- 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);    }}

登录后复制我们来看看最终的效果吧~在线演示地址

写在最后首先感谢大家看到这里，这次分享的是爱之满满点赞效果，希望可以帮助到有需要的同学。

更多编程相关知识，请访问：编程学习！!

以上就是CSS+JS实现爱心点赞按钮（代码示例）的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~