CSS JS melaksanakan butang suka suka (contoh kod)

Artikel ini akan memperkenalkan kepada anda cara melaksanakan butang suka "penuh kasih sayang" menggunakan CSS JS saya harap ia akan membantu anda!

Saya sedang menonton rancangan rap suatu ketika dahulu dan telah dicuci otak dengan frasa JBcob oleh seorang penyanyi rap 爱之满满.

Jadi kali ini saya bawakan butang 爱之满满 like kepada anda, supaya anda dapat merasai perasaan berbalut cinta sambil menyukainya.

ToDoList

• Butang hati
• Guide likes
• Penuh Kasih Sayang

Lakukan Sahaja

❤️ Butang Hati

• Terdapat banyak cara untuk membuat jantung Anda boleh menggunakan jantung dari perpustakaan ikon, anda boleh menulis svg, anda boleh menggunakan gambar Di sini saya akan menggunakan elemen pseudo untuk membuat jantung . (Belajar perkongsian video: tutorial video 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;
}

• Tambahkan beberapa bayang pada lapisan luar untuk mendapatkan kesan mimetik

Pandu suka

• Kita perlu membuat butang membuat beberapa kesan visual untuk membimbing penonton Datuk menyukainya, maka getaran berterusan sudah pasti merupakan pilihan yang baik.

// 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);
    }
}

Penuh kasih sayang

• Perkara seterusnya adalah yang paling pentingPenuh cinta, bagaimana kita boleh mencapai kesan ini lebih banyak cinta, lebih baik.
• Kemudian mari kita cari cara untuk menjadikan cinta terapungdi sekeliling butang dan alih dan hilang dalam masa yang ditetapkan.
• Untuk mencipta elemen anda boleh menggunakan document.createElement, untuk mengalih keluar elemen anda boleh menggunakan DOM's remove()
• Selebihnya mudah, anda hanya perlu proses iniHanya tetapkan saiz dan anjakan yang berbeza untuk hati yang berbeza.
• Kod teras (Sila lihat penghujung artikel untuk kod lengkap):

// 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);
    }
}

• Mari kita lihat pada kesan akhir~Alamat demo dalam talian

Ditulis pada penghujung

• Pertama sekali, terima kasih semua kerana membaca ini , apa yang saya kongsikan kali ini adalah kesan 爱之满满 likes, semoga dapat membantu pelajar yang memerlukan.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Belajar Pengaturcaraan! !

Atas ialah kandungan terperinci CSS JS melaksanakan butang suka suka (contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!