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

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

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

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

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: '';
      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);
    }
}

愛之满

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

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 ボタンを実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。