Pemuat Elemen Tunggal: Titik

Artikel ini meneroka membuat animasi pemuatan menggunakan elemen Div tunggal. Kami telah membedah loader berputar; Sekarang, mari kita menangani animasi yang biasa: titik -titik .

Pemuat titik di mana -mana. Rayuan mereka terletak pada kesederhanaan mereka: tiga titik, menyerupai teks ellipsis (...), melakukan urutan visual yang dinamik.

Gambaran Keseluruhan Siri

• Pemuat Unsur Tunggal: Pemutar
• Pemuat Unsur Tunggal: Titik - Artikel Semasa
• Pemuat Unsur Tunggal: Bar
• Pemuat Unsur Tunggal: Pergi 3D

Objektif kami adalah untuk meniru animasi ini menggunakan hanya satu div, menghapuskan keperluan untuk div individu setiap titik atau animasi berasingan. Contoh di atas mencapai ini menggunakan satu div, CSS, dan tiada unsur-unsur pseudo, dengan bijak menggabungkan teknik latar belakang dan topeng. Ilusi titik-titik perubahan warna dicipta dengan menghidupkan kecerunan latar belakang.

Menghidupkan latar belakang

Mari kita mulakan dengan animasi latar:

 .loader {
  lebar: 180px;
  aspek nisbah: 8/5;
  Latar Belakang: 
    Conic-Gradient (merah 50%, biru 0) tidak berulang, 
    conic-gradient (hijau 50%, ungu 0) tidak berulang;
  Latar Belakang: 200% 50%; 
  Animasi: Back 4S Infinite Linear;
}

@keyframes kembali {
  0%, 100% {latar belakang-kedudukan: 0% 0%, 0% 100%; }
  25% {latar belakang-kedudukan: 100% 0%, 0% 100%; }
  50% {latar belakang-kedudukan: 100% 0%, 100% 100%; }
  75% {latar belakang-kedudukan: 0% 0%, 100% 100%; }
}

Elemen .loader 180px yang luas memaparkan dua kecerunan konik dengan peralihan warna yang tajam. Bahagian atas menggunakan merah dan biru, separuh bahagian bawah hijau dan ungu. Lebar 200% memastikan hanya satu warna yang dapat dilihat pada satu masa pada setiap separuh. Kitaran animasi melalui kedudukan, mewujudkan ilusi perubahan warna.

Untuk pemahaman yang lebih mendalam tentang background-position , rujuk jawapan limpahan timbunan ini . Animasi dengan bijak memanipulasi koordinat X dan Y dari kecerunan.

Kenapa conic-gradient() bukannya linear-gradient() ?

Menggunakan conic-gradient() lebih ringkas dan mencapai hasil yang sama.

Dengan menyesuaikan fungsi masa animasi dari linear ke steps(1) , kami menghapuskan warna berkelip.

Membuat titik -titik

Seperti dalam artikel sebelumnya, kami menggunakan topeng CSS . Topeng membolehkan kita secara selektif mendedahkan bahagian latar belakang. Di sini, kami akan membuat titik -titik, mendedahkan kecerunan latar belakang melalui mereka.

Kami akan menggunakan radial-gradient() :

 .loader {
  / * ... gaya sebelumnya ... */
  --_ G: Radial-Gradient ( #000 68%, #0000 71%) tidak berulang;
  topeng: var (--_ g), var (--_ g), var (--_ g);
  Saiz Mask: 25% 40%;
}

Pembolehubah CSS, --_g , memudahkan kod. Tiga kecerunan radial mencipta titik -titik.

Sekarang, kita memerlukan animasi untuk memindahkan titik -titik:

 .loader {
  / * ... gaya sebelumnya ... */
  Animasi: Beban 2S Infinite;
}

@keyframes beban {
  0%, 100% {Mask-kedudukan: 0% 0%, 50% 0%, 100% 0%; }
  16.67% {topeng-kedudukan: 0% 100%, 50% 0%, 100% 0%; }
  33.33% {topeng-kedudukan: 0% 100%, 50% 100%, 100% 0%; }
  50% {topeng-kedudukan: 0% 100%, 50% 100%, 100% 100%; }
  66.67% {topeng-kedudukan: 0% 0%, 50% 100%, 100% 100%; }
  83.33% {topeng-kedudukan: 0% 0%, 50% 0%, 100% 100%; }
}

Animasi ini menyesuaikan koordinat Y dari setiap mask-position titik, mewujudkan pergerakan up-and-down. Menggabungkan ini dengan animasi kecerunan menghasilkan kesan akhir.

Variasi dan contoh selanjutnya

Pembolehubah CSS membolehkan pelarasan warna dan saiz mudah. Animasi yang berbeza juga boleh dibuat dengan mengubah suai kerangka utama. Contoh selanjutnya, termasuk pemuat tunggal dan loader kesan blobby, boleh didapati di sini . Pendekatan grid CSS juga ditunjukkan, memudahkan saiz dan kedudukan.

Kesimpulan dan langkah seterusnya

Artikel ini menunjukkan penciptaan dot loaders dengan div tunggal. Artikel seterusnya akan meliputi pemuat bar , membina teknik yang dipelajari di sini.

Gambaran Keseluruhan Siri

• Pemuat Unsur Tunggal: Pemutar
• Pemuat Unsur Tunggal: Titik - Artikel Semasa
• Pemuat Unsur Tunggal: Bar
• Pemuat Unsur Tunggal: Pergi 3D

(Ingatlah untuk menggantikan https://www.php.cn/link/9fc36fa768a74fa93d3ee7bf57b1392c dan https://www.php.cn/link/0c6ba56676353996dff5efb2b7789e1e .

Atas ialah kandungan terperinci Pemuat Elemen Tunggal: Titik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!