検索
ホームページウェブフロントエンドCSSチュートリアルCSS + JS で Love Like ボタンを実装します (コード例)

この記事では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 サイトの他の関連記事を参照してください。

声明
この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
cohost.orgの失われたCSSトリックcohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee&#039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG&#039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind&#039;の@Apply機能は、響きよりも優れていますTailwind&#039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind&#039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境