CSS+JS implementiert den Love-Like-Button (Codebeispiel)

In diesem Artikel erfahren Sie, wie Sie mit CSS+JS einen „Full of Love“-Like-Button implementieren. Ich hoffe, er wird Ihnen hilfreich sein!

Ich habe vor einiger Zeit eine Rap-Show gesehen und wurde mit dem Satz full of love von einem Rapper JBcob einer Gehirnwäsche unterzogen. 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);
    }
}

• 我们来看看最终的效果吧~在线演示地址

写在最后

• 首先感谢大家看到这里，这次分享的是爱之满满
Dieses Mal bringe ich euch also einen voller Liebe-Like-Button, damit jeder das Gefühl spüren kann, in Liebe gehüllt zu sein, während er ihn mag.

ToDoList

• Liebesschaltfläche

Guide gefällt mir

Voller Liebe🎜🎜

Tu es einfach

❤️ Herz-Button

• Es gibt viele Möglichkeiten, ein Herz zu erstellen. Sie können das Herz in der Symbolbibliothek verwenden oder ein svg, Sie können Bilder verwenden. Hier werde ich Pseudoelemente verwenden, um ein Herz zu erstellen. (Teilen von Lernvideos: CSS-Video-Tutorial🎜)🎜🎜rrreeerrreee
  • Gib mir Fügen Sie der äußeren Ebene einige Schatten hinzu, um den Mimikry-Effekt zu erzielen. 🎜🎜🎜 png" title="1635217134553344.png" alt="CSS+JS implementiert den Love-Like-Button (Codebeispiel)"/>🎜

    Guide gefällt mir

    • Wenn der Button visuelle Effekte haben muss, um das Publikum dazu zu bringen, ihn zu mögen, ist kontinuierliche Vibration zweifellos eine gute Wahl. 🎜🎜rrreeerrreee🎜🎜

      Full of Love

      • Der nächste Schritt ist der wichtigste Full of Love , wie können wir diesen Effekt erreichen? Je mehr Liebe, desto besser. 🎜
      • Dann wollen wir einen Weg finden, die Liebe um den Knopf herum schweben zu lassen und sie innerhalb der angegebenen Zeit zu verschieben und zu verschwinden. 🎜
      • Um ein Element zu erstellen, können Sie document.createElement verwenden, um ein Element zu entfernen, können Sie DOMs remove() verwenden🎜
      • Der Rest ist ganz einfach, Sie müssen dabei lediglich unterschiedliche Größen und Verschiebungen für verschiedene Herzen einstellen. 🎜
      • Kerncode (Den vollständigen Code finden Sie am Ende des Artikels): 🎜🎜rrreeerrreee
        • Werfen wir einen Blick auf den Endeffekt~Online-Demo-Adresse🎜🎜🎜🎜🎜

          Schreiben Sie am Ende strong>

          • Zunächst einmal vielen Dank, dass Sie das gesehen haben. Dieses Mal teile ich die Wirkung von voller Liebe Ich hoffe, dass es Schülern in Not helfen kann. 🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmieren lernen🎜! !🎜

Das obige ist der detaillierte Inhalt vonCSS+JS implementiert den Love-Like-Button (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!