CSS+JS implements love like button (code example)

This article will introduce to you how to implement a "full of love" like button using CSS JS. I hope it will be helpful to you!

I was watching a rap show some time ago, and I was struck by the phrase 的爱ery from one of the rappers JBcob Words have brainwashed me.

So this time I bring you a 爱之满 like button, so that everyone can feel the feeling of being wrapped in love while liking it.

ToDoList

• Love Button
• Guide Like
• full of love

Just Do It

##❤️ Love Button

There are many ways to make a heart. You can use the heart from the icon library, you can write a
• svg, or you can use a picture. Here I will use pseudo-element to make a heart. . (Learning video sharing: css video tutorial)

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

Add some shadows to the outer layer to come out
• imitation effect

Guide likes

We need to make the buttons have some visual effects to guide the audience to like, That
• Continuous Vibration is undoubtedly a good choice.

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

爱之满

#The next step is the most important thing
• 爱之满It’s full , how can we achieve this effect? ​​The more love, the better.
Then let’s find a way to make the
• love float around the button, and the love will be displaced and disappear within the specified time.
To create an element, you can use
• document.createElement, and to remove an element, you can use remove() of DOM
It's easy to download. You only need to
• set different sizes and displacements for different hearts during the process.
Core code (
• Please see the end of the article for the complete code):

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

Let’s take a look at the final effect~
• Online demo address

Written at the end

First of all, thank you all for seeing this and sharing this time It’s the effect of
• 爱之满 likes. I hope it can help students in need.

Programming Learning! !

The above is the detailed content of CSS+JS implements love like button (code example). For more information, please follow other related articles on the PHP Chinese website!