Panduan untuk mencipta kesan kelipan menggunakan animasi CSS

Contoh kod:

<div class="blink-element"></div>

2.2 Tentukan gaya CSS
Seterusnya, tentukan gaya CSS untuk elemen berkelip, termasuk warna latar belakang, lebar dan tinggi, dsb. Di samping itu, untuk mencapai kesan kelipan, kita juga perlu menentukan nama animasi.

Contoh kod:

.blink-element {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: blink-animation 1s infinite;
}

2.3 Cipta animasi bingkai utama
Dalam kod CSS, kami akan menggunakan kata kunci @keyframes untuk mentakrifkan animasi bingkai utama yang berkelip. Animasi keyframe memerlukan menetapkan keadaan mula dan keadaan akhir.

Kod contoh:

@keyframes blink-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

2.4 Guna animasi denyar
Akhir sekali, kami menggunakan animasi denyar yang ditentukan pada elemen denyar. Dalam kod CSS sebelumnya, kami telah mentakrifkan animasi sifat animasi untuk elemen berkelip, menetapkan nama animasi kepada animasi berkelip dan menetapkan tempoh animasi kepada 1 saat, gelung tak terhingga.

Kod contoh:

.blink-element {
  /* ... */
  animation: blink-animation 1s infinite;
}

3 Optimumkan kesan berkelip

3.1 Laraskan masa animasi
Dengan pelarasan. kita boleh Tukar frekuensi denyar. Contohnya, menetapkan tempoh animasi kepada 0.5 saat menjadikan kelipan lebih cepat, manakala menetapkan tempoh animasi kepada 2 saat menjadikan kelipan lebih perlahan.

Contoh kod:

.blink-element {
  /* ... */
  animation: blink-animation 0.5s infinite;
}

3.2 Laraskan gaya bingkai kunci
Dengan melaraskan ketelusan gaya bingkai utama, kita boleh menukar keterlihatan elemen berkelip. Sebagai contoh, menetapkan ketelusan keadaan mula kepada 0 dan ketelusan keadaan akhir kepada 0.5 boleh menjadikan elemen kelipan bertukar daripada tiada kepada tiada apabila ia berkelip, dan kemudian daripada tiada kepada tiada.

Contoh kod:

@keyframes blink-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

3.3 Menambah kesan lain
Selain melaraskan masa animasi dan gaya bingkai utama, anda juga boleh menggunakan kesan CSS lain bersamaan dengan kelipan mata animasi, untuk mencapai kesan kilat yang lebih pelbagai. Contohnya, anda boleh menggunakan atribut transform untuk memutar atau menskalakan elemen berkelip.

Kod contoh:

@keyframes blink-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

Kesimpulan:
Dengan langkah di atas, kita boleh mencipta kesan berkelip menggunakan animasi CSS dengan mudah. Dengan melaraskan masa animasi, gaya bingkai utama dan menggabungkan kesan CSS yang lain, kami boleh mencipta pelbagai kesan animasi berkelip unik untuk menambah daya hidup dan daya tarikan pada halaman web.

Sumber rujukan:

• w3schools.com: CSS Animations
• MDN web docs: Keyframes#🎜🎜
Di atas adalah panduan menggunakan animasi CSS untuk mencipta kesan kelipan saya harap ia akan membantu anda. Terima kasih!