點(diǎn)贊按鈕居然還能這么玩？

?? 前言

• 前段時間在看一檔說唱節(jié)目，被里面的一個說唱歌手JBcob的愛之滿滿這句詞給洗腦了。
• 感謝大家對上一篇文章請務(wù)必收下這10+個加載特效，保證讓你的項目大放異彩?的喜愛，于是我就想著怎么讓大家點(diǎn)贊感受到愛之滿滿的感覺呢？
• 于是這次給大家?guī)硪粋€愛之滿滿的點(diǎn)贊按鈕，讓大家在點(diǎn)贊的同時還能感受到被愛包裹的感覺。

???♂? ToDoList

• [ ] 愛心按鈕
• [ ] 引導(dǎo)點(diǎn)贊
• [ ] 愛之滿滿

?? Just Do It

?? 愛心按鈕

• 制作一個愛心的方式有很多，可以用圖標(biāo)庫的愛心，可以寫一個svg，可以用圖片，我這里就用「偽元素」的方式做一個愛心。

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

• 再給外層加一些陰影就可以出來「擬態(tài)化效果」

?? 引導(dǎo)點(diǎn)贊

• 我們需要讓按鈕做出一些視覺效果來引導(dǎo)觀眾姥爺們點(diǎn)贊，那「持續(xù)震動」無疑是一種好的選擇。

//?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);
????}
}

?? 愛之滿滿

• 接下來就是最主要的「愛之滿滿」了，怎么樣才能達(dá)到這種效果呢，那必然是越多的愛越好啊。
• 那我們想辦法讓「愛心漂浮」在按鈕周圍，在規(guī)定時間內(nèi)「愛心進(jìn)行位移并消失」即可。
• 創(chuàng)建一個元素可以使用document.createElement，移除元素可以使用DOM 的remove()
• 剩下的就簡單了，只需要在「這個過程中」給「不同的愛心」設(shè)置不同的大小和位移即可。
• 核心代碼（「完整代碼請看文末」）：

//?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);
????}
}

• 我們來看看最終的效果吧~在線演示地址

結(jié)語

「關(guān)注公眾號IQ前端，一個專注于CSS/JS開發(fā)技巧的前端公眾號，更多前端小干貨等著你喔」