ホームページ > 記事 > ウェブフロントエンド > CSS + JS で Love Like ボタンを実装します (コード例)
この記事ではCSS JSを使って「愛あふれる」いいねボタンを実装する方法をご紹介しますので、お役に立てれば幸いです。
私は少し前にラップ番組を見ていたのですが、ラッパーの 1 人 JBcob の
的愛 というフレーズに衝撃を受けました。
言葉が私を洗脳してしまいました。
そこで今回は、誰もが「いいね!」しながら愛に包まれる感覚を感じられるように、「爱之满
」いいねボタンをご用意しました。
を記述することも、画像を使用することもできます。ここでは
疑似要素## を使用します#ハートを作る . (学習ビデオ共有: 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.js function addHearts(content) { for(let i=0; i<10; i++) { setTimeout(() => { const fullHeart = document.createElement('div'); fullHeart.classList.add('hearts'); fullHeart.innerHTML = '<span class="heart"></span>'; fullHeart.style.left = Math.random() * 100 + '%'; fullHeart.style.top = Math.random() * 100 + '%'; fullHeart.style.transform = `translate(-50%, -50%) scale(${Math.random()+0.3}) ` fullHeart.style.animationDuration = Math.random() * 2 + 3 + 's'; fullHeart.firstChild.style.backgroundColor='#ed3056' 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 サイトの他の関連記事を参照してください。