ホームページ  >  記事  >  ウェブフロントエンド  >  CSS + JS で Love Like ボタンを実装します (コード例)

CSS + JS で Love Like ボタンを実装します (コード例)

青灯夜游
青灯夜游転載
2021-10-26 11:05:444435ブラウズ

この記事ではCSS JSを使って「愛あふれる」いいねボタンを実装する方法をご紹介しますので、お役に立てれば幸いです。

CSS + JS で Love Like ボタンを実装します (コード例)

私は少し前にラップ番組を見ていたのですが、ラッパーの 1 人 JBcob の 的愛 というフレーズに衝撃を受けました。 言葉が私を洗脳してしまいました。

そこで今回は、誰もが「いいね!」しながら愛に包まれる感覚を感じられるように、「爱之满」いいねボタンをご用意しました。

CSS + JS で Love Like ボタンを実装します (コード例)

ToDoリスト

  • 愛のボタン
  • ガイドのいいね
  • 愛に満ちた

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: &#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;
    }
外側のレイヤーに影を追加して、#模倣効果を出します

#ガイドの好みCSS + JS で Love Like ボタンを実装します (コード例)

##視聴者に気に入ってもらえるよう、ボタンに視覚効果を持たせる必要があります。 ##連続振動 は間違いなく良い選択です。

// 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 で Love Like ボタンを実装します (コード例)

#次のステップが最も重要です

love之满いっぱいです 、どうすればこの効果を達成できますか? 愛は多ければ多いほど良いです。

次に、
    愛をボタンの周りに浮かべる方法を見つけてみましょう。
  • 愛は指定された時間内に移動して消えます
  • 要素を作成するには、
  • 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);
        }
    }
    最終的な効果を見てみましょう~
  • オンラインデモアドレス

まず、これを見て、この時間を共有してくださった皆さんに感謝します。これは CSS + JS で Love Like ボタンを実装します (コード例)爱之满

の「いいね!」の効果です。困っている学生たちを助けることができれば幸いです。

プログラミング関連の知識について詳しくは、

プログラミング学習
    をご覧ください。 !

以上がCSS + JS で Love Like ボタンを実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。