Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Gelung Animasi Teks Pudar Masuk & Keluar CSS \'Memuatkan\' tanpa JavaScript?

Bagaimana untuk Mencipta Gelung Animasi Teks Pudar Masuk & Keluar CSS \'Memuatkan\' tanpa JavaScript?

Susan Sarandon
Lepaskan: 2024-10-26 19:26:02
asal
666 orang telah melayarinya

How to Create a CSS Fade In & Out

Gelung Animasi CSS Mudah: Pudar Masuk & Keluar Teks "Memuatkan"

Untuk mencipta animasi gelung dalam CSS yang memudar masuk dan keluar teks tanpa menggunakan JavaScript, pertimbangkan perkara berikut:

<code class="css">@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}</code>
Salin selepas log masuk

Peraturan @keyframes mentakrifkan animasi itu sendiri. Dalam kes ini, animasi hanya menukar kelegapan elemen daripada legap sepenuhnya kepada telus sepenuhnya dan kembali semula.

<code class="css">.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}</code>
Salin selepas log masuk

Kelas .animate-flicker menggunakan animasi pada mana-mana elemen dengan kelas itu. Sifat animasi menentukan nama animasi, tempoh setiap lelaran (dalam kes ini, 1 saat) dan sama ada animasi harus berulang tanpa had.

Satu perkara yang perlu diambil perhatian ialah kod di atas mungkin tidak berfungsi dalam semua pelayar. Untuk memastikan keserasian dengan julat penyemak imbas yang lebih luas, anda perlu menambah awalan vendor yang sesuai pada sifat animasi. Contohnya:

<code class="css">.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}</code>
Salin selepas log masuk

Dengan tambahan awalan vendor ini, animasi harus berfungsi dalam kebanyakan penyemak imbas moden.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Gelung Animasi Teks Pudar Masuk & Keluar CSS 'Memuatkan' tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan