Home  >  Article  >  Web Front-end  >  CSS+JS implements love like button (code example)

CSS+JS implements love like button (code example)

青灯夜游
青灯夜游forward
2021-10-26 11:05:444434browse

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!

CSS+JS implements love like button (code example)

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.

CSS+JS implements love like button (code example)

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: &#39;&#39;;
        position: absolute;
        top: -50%;
        left: 0;
        background-color: inherit;
        border-radius: 50%;
        height: 13px;
        width: 13px;
    }
    .heart::after {
        content: &#39;&#39;;
        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

CSS+JS implements love like button (code example)

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(&#39;likeBtn&#39;);
    const heart=document.getElementById(&#39;heart&#39;)
    likeBtn.addEventListener(&#39;mousemove&#39;,() => {
      heart.classList.add(&#39;heratPop&#39;)
    })
    likeBtn.addEventListener(&#39;mouseout&#39;,() => {
      heart.classList.remove(&#39;heratPop&#39;)
    })
    /* 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);
        }
    }

CSS+JS implements love like button (code example)

爱之满

    #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

CSS+JS implements love like button (code example)

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.
For more programming-related knowledge, please visit:

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!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete