CSS+JS implémente le bouton Love Like (exemple de code)

Cet article vous présentera comment implémenter un bouton J'aime "plein d'amour" en utilisant CSS+JS. J'espère que cela vous sera utile !

Je regardais une émission de rap il y a quelque temps et j'ai subi un lavage de cerveau par la phrase plein d'amour par un rappeur JBcob. 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);
    }
}

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

写在最后

• 首先感谢大家看到这里，这次分享的是爱之满满
Alors cette fois, je vous propose un bouton J'aime plein d'amour, pour que tout le monde puisse ressentir le sentiment d'être enveloppé d'amour tout en l'aimant.

ToDoList

• Bouton d'amour

Guide j'aime

Plein d'amour🎜🎜

Faites-le

❤️ Bouton Coeur

• Il existe de nombreuses façons de créer un cœur. Vous pouvez utiliser le cœur dans la bibliothèque d'icônes ou écrire un <. code>svg, vous pouvez utiliser des images Ici, je vais utiliser des pseudo-éléments pour faire un cœur. (Partage de vidéos d'apprentissage : tutoriel vidéo CSS🎜)🎜🎜rrreeerrree
  • Donnez-moi plus Ajoutez quelques ombres au calque externe pour obtenir l'effet de mimétisme🎜🎜🎜🎜

    J'aime le guide

    • Nous Si le bouton doit avoir des effets visuels pour inciter le public à l'apprécier, la vibration continue est sans aucun doute un bon choix. 🎜🎜rrreeerrreee🎜🎜

      Plein d'amour

      • La prochaine étape est la plus importante Plein d'amour Eh bien , comment pouvons-nous obtenir cet effet ? Plus il y a d'amour, mieux c'est. 🎜
      • Trouvons ensuite un moyen de faire flotter l'amour autour du bouton, puis de déplacer et disparaître dans le délai spécifié. 🎜
      • Pour créer un élément, vous pouvez utiliser document.createElement, pour supprimer un élément, vous pouvez utiliser remove() de DOM🎜
      • Le reste C'est simple, il vous suffit de définir différentes tailles et déplacements pour différents cœurs au cours du processus. 🎜
      • Code principal (Veuillez consulter la fin de l'article pour le code complet) : 🎜🎜rrreeerrreee
        • Jetons un coup d'œil à l'effet final~Adresse de démonstration en ligne 🎜🎜🎜🎜🎜

          Écrivez à la fin strong>

          • Tout d'abord, merci à tous d'avoir vu cela. Cette fois, je partage l'effet de plein d'amour. aime. J’espère que cela pourra aider les étudiants dans le besoin. 🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Apprendre la programmation🎜 ! !🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!