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

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

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

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

ToDoList

爱心按钮 引导 点赞 爱之满满

Just Do IT

❤️ 爱心按钮

制作 一个爱心的方式有很多，可以用图标库的爱心，可以写一个 svg ，可以用图片，我这里就用 伪元素 的方式做一个爱心。（学习视频分享：css视频教程）

<!-- fullLove.ht ML  -->
<div class="like BT n" id="likeBtn">
    <span class="heart" id="heart"></span>
</div>

/* fullLove.css */
.heart{
    background-color:  # 8a93a0;
    h ei ght: 13px;
    width: 13px;
    transform: rotate(-45 deg ) scale(1);
    dis play : 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(' ;m ou SEM ove',() => {
  heart.classList.add('heratPop')
})
likeBtn.addEventListener('mouseout',() => {
  heart.classList.remove('heratPop')
})

/* fullLove.css */
.heratPop{
    animation: pulse 1s linear infinite;
}
@keyfr am es 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. First Child.style.backgroundColor='#ed3056'
      content.ap PE ndChild(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 forwa rds ;
}
@keyframes fly {
    to {
        transform: translate(-50%, -50px) scale(0);
    }
}

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

写在最后

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

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

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

总结

以上是 为你收集整理的 CSS+JS实现爱心点赞按钮（代码示例） 全部内容，希望文章能够帮你解决 CSS+JS实现爱心点赞按钮（代码示例） 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS+JS实现爱心点赞按钮（代码示例）的详细内容...