本篇文章给大家介绍一下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.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 = '';
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);
}
}- 我们来看看最终的效果吧~在线演示地址
写在最后
- 首先感谢大家看到这里，这次分享的是
爱之满满点赞效果，希望可以帮助到有需要的同学。
更多编程相关知识，请访问：编程学习！!
