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

???♂? ToDoList
[ ] 愛心按鈕
[ ] 引導(dǎo)點(diǎn)贊
[ ] 愛之滿滿
?? Just Do It
?? 愛心按鈕
制作一個(gè)愛心的方式有很多，可以用圖標(biāo)庫的愛心，可以寫一個(gè)svg，可以用圖片，我這里就用「偽元素」的方式做一個(gè)愛心。
<!-- 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;
}
再給外層加一些陰影就可以出來「擬態(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ī)定時(shí)間內(nèi)「愛心進(jìn)行位移并消失」即可。
創(chuàng)建一個(gè)元素可以使用document.createElement，移除元素可以使用DOM 的remove()
剩下的就簡單了，只需要在「這個(gè)過程中」給「不同的愛心」設(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 = '<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);
    }
}
我們來看看最終的效果吧~在線演示地址



作者：快跑啊小盧


歡迎關(guān)注微信公眾號 ：前端快快跑