CSS JS melaksanakan butang suka suka (contoh kod)-tutorial css-php.cn

CSS JS melaksanakan butang suka suka (contoh kod)

青灯夜游

Lepaskan： 2021-11-04 10:15:57

ke hadapan

4482 orang telah melayarinya

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

CSS JS melaksanakan butang suka suka (contoh kod)

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.

CSS JS melaksanakan butang suka suka (contoh kod)

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>

Salin selepas log masuk

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

Salin selepas log masuk

Tambahkan beberapa bayang pada lapisan luar untuk mendapatkan kesan mimetik

CSS JS melaksanakan butang suka suka (contoh kod)

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(&#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;)
})

Salin selepas log masuk

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

Salin selepas log masuk

CSS JS melaksanakan butang suka suka (contoh kod)

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

Salin selepas log masuk

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

Salin selepas log masuk

Mari kita lihat pada kesan akhir~Alamat demo dalam talian

CSS JS melaksanakan butang suka suka (contoh kod)

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!