Pemuat Elemen Tunggal: Pergi 3D!

Mewujudkan kiub 3D yang meyakinkan dengan hanya satu elemen HTML nampaknya mustahil, tetapi dengan bijak yang hanya memberikan tiga wajah yang kelihatan, kita dapat mencapai kesan seperti kiub. Mari kita bina!

Loader ini menggambarkan perpecahan kiub dalam dua, namun hanya menggunakan unsur HTML tunggal. Setiap separuh dibuat menggunakan pseudo-element ( :: sebelum dan :: selepas ).

Keajaiban terletak pada menggabungkan kecerunan konik, CSS Clip-Path , dan margin negatif. Warna kecerunan conic wajah, clip-path membentuk mereka, dan margin negatif bertindih dengan elemen pseudo untuk mensimulasikan kiub lengkap. Animasi membawa loader ke kehidupan.

Perwakilan visual menjelaskan clip-path pengiraan: (rajah akan diletakkan di sini, serupa dengan yang asal)

mari kita kodkannya. Pertama, kami menyediakan elemen .loader :

 .loader { -s: 150px; / * Kawalan saiz */ --_ D: calc (0.353 * var (-s)); / * 0.353 = sin (45deg)/2 */lebar: calc (var (-s) var (--_ d)); Aspek-nisbah: 1; Paparan: Flex; } 

Seterusnya, pseudo-elements:

 .loader :: sebelum, .loader :: selepas {content: ""; Flex: 1; } 

Sapukan kecerunan konik:

 .loader :: sebelum, .loader :: selepas {latar belakang: conic-gradient (dari -90deg pada calc (100%-var (--_ d)) var (--_ d), #fff 135deg, #666 0 270deg, #AAA, }  } 

bertindih dengan bahagian menggunakan margin negatif:

 .loader :: sebelum {margin-right: calc (var (--_ d)/-2); } .loader :: selepas {margin-left: calc (var (--_ d) / -2); } 

Akhirnya, animasi:

 .loader :: sebelum, .loader :: selepas {animasi: beban 1.5s tak terhingga kubik-bezier (0, .5, .5, 1.8) alternatif; } .loader :: selepas {animation -delay: -.75s; } @KeyFrames LOAD {0%, 40% {Transform: Translate (calc (var (-s) / -4)); } 60%, 100% {transform: translate (calc (var (-s) / 4)); }} 

(Demo akhir akan ditunjukkan di sini)

Kemajuan Cube Loader

Mari menyesuaikan teknik ini untuk pemuat kemajuan 3D - masih dengan satu elemen! Simulasi kiub tetap sama, tetapi kita menyesuaikan nisbah ketinggian dan aspek. Animasi bijak menggunakan flex-grow: 1 untuk mengisi ruang yang tinggal sebagai lebar sebelah kiri meningkat.

) Latar Belakang-Mod: Multiply; }

Animasi lebar sebelah kiri:

 @keyframes beban {0%, 5% {width: var (--_ d); } 95%, 100%{lebar: 100%; }} 

(Demo yang lebih baik akan ditunjukkan di sini, menangani isu muka bawah)

Kod lengkap, termasuk penetapan untuk muka bawah: (kod lengkap akan dimasukkan di sini)

Eksperimen dan buat variasi anda sendiri!

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