本篇文章给大家介绍一下css+js实现一个“爱之满满”点赞按钮的方法，希望对大家有所帮助！
前段时间在看一档说唱节目，被里面的一个说唱歌手JBcob的爱之满满这句词给洗脑了。
于是这次给大家带来一个爱之满满的点赞按钮，让大家在点赞的同时还能感受到被爱包裹的感觉。
立即学习“前端免费学习笔记（深入）”；
ToDoList
爱心按钮引导点赞爱之满满
Just Do It
❤️ 爱心按钮
制作一个爱心的方式有很多，可以用图标库的爱心，可以写一个svg，可以用图片，我这里就用伪元素的方式做一个爱心。（学习视频分享：css视频教程）
/* 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 { const fullHeart = document.createElement('div'); fullHeart.classList.add('hearts'); fullHeart.innerHTML = ''; 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实现爱心点赞按钮（代码示例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621878.html
微信扫一扫 
支付宝扫一扫 
