Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2021-11-04 10:15:57
nach vorne
4464 Leute haben es durchsucht

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

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

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爱之满满这句词给洗脑了。

于是这次给大家带来一个爱之满满的点赞按钮,让大家在点赞的同时还能感受到被爱包裹的感觉。

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

ToDoList

  • 爱心按钮
  • 引导点赞
  • 爱之满满

Just Do It

❤️ 爱心按钮

  • 制作一个爱心的方式有很多,可以用图标库的爱心,可以写一个svg,可以用图片,我这里就用伪元素的方式做一个爱心。(学习视频分享:css视频教程
<!-- fullLove.html -->
<div class="likeBtn" id="likeBtn">
    <span class="heart" id="heart"></span>
</div>
Nach dem Login kopieren
/* 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;
}
Nach dem Login kopieren
  • 再给外层加一些阴影就可以出来拟态化效果

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

引导点赞

  • 我们需要让按钮做出一些视觉效果来引导观众姥爷们点赞,那持续震动无疑是一种好的选择。
// 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;)
})
Nach dem Login kopieren
/* 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);
    }
}
Nach dem Login kopieren

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

爱之满满

  • 接下来就是最主要的爱之满满了,怎么样才能达到这种效果呢,那必然是越多的爱越好啊。
  • 那我们想办法让爱心漂浮在按钮周围,在规定时间内爱心进行位移并消失即可。
  • 创建一个元素可以使用document.createElement,移除元素可以使用DOMremove()
  • 剩下的就简单了,只需要在这个过程中不同的爱心设置不同的大小和位移即可。
  • 核心代码(完整代码请看文末):
// 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)
  }
}
Nach dem Login kopieren
/* 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);
    }
}
Nach dem Login kopieren

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

写在最后

  • 首先感谢大家看到这里,这次分享的是爱之满满
  • 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.

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

ToDoList

  • Liebesschaltfläche

  • Guide gefällt mir
  • Voller Liebe🎜🎜

    Tu es einfach

    ❤️ Herz-Button

  • 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!

    Verwandte Etiketten:
    Quelle:juejin.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage