CSS+JS實作愛心讚按鈕（程式碼範例）

本篇文章跟大家介紹CSS JS實作一個「愛之滿滿」讚按鈕的方法，希望對大家有幫助！

前段時間在看一檔饒舌節目，被裡面的一個饒舌歌手JBcob的愛之滿滿這句詞給洗腦了。

於是這次帶給大家一個愛之滿滿的讚按鈕，讓大家在讚的同時還能感受到被愛包裹的感覺。

ToDoList

• #愛心按鈕
• ##開讚
• 愛之滿滿

Just Do It

❤️ 愛心按鈕

製作一個愛心的方式有很多，可以用圖標庫的愛心，可以寫一個svg，可以用圖片，我這裡就用

偽元素

的方式做一個愛心。 （學習影片分享：
• css影片教學）

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

再給外層加一些陰影就可以出來擬態化效果

• #引導點讚
• #我們需要讓按鈕做出一些視覺效果來引導觀眾姥爺們按讚，那持續震動無疑是個好的選擇。

// 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(&#39;div&#39;);
      fullHeart.classList.add(&#39;hearts&#39;);
      fullHeart.innerHTML = &#39;<span class="heart"></span>&#39;;
      fullHeart.style.left = Math.random() * 100 + &#39;%&#39;;
      fullHeart.style.top = Math.random() * 100 + &#39;%&#39;;
      fullHeart.style.transform = `translate(-50%, -50%) scale(${Math.random()+0.3}) `
      fullHeart.style.animationDuration = Math.random() * 2 + 3 + &#39;s&#39;;
      fullHeart.firstChild.style.backgroundColor=&#39;#ed3056&#39;
      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實作愛心讚按鈕（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！