Chargeurs d'élément unique: aller en 3D!

Cet installation finale de notre série de chargeurs à élément unique explore 3D Design. La création d'un cube 3D convaincant avec un seul élément HTML semble impossible, mais en ne rendant intelligemment que trois visages visibles, nous pouvons obtenir un effet semblable à un cube. Letons-le!

Recap en série

• chargeurs à élément unique: le spinner
• chargeurs à élément unique: les points
• chargeurs à élément unique: les barres
• Chargeurs à élément unique: en 3D - vous êtes ici

le Cubre Split Cuba

Le Cubre Split Cuba

Le Cubre Split Cuba Le chargeur décrit un cube divisé en deux, mais n'utilise qu'un seul élément HTML. Chaque moitié est créée à l'aide d'un pseudo-élément ( :: avant et :: après ).

La magie réside dans la combinaison des gradients coniques, CSS clip-path et des marges négatives. Le gradient conique colore les visages, clip-chemin les façonne, et les marges négatives chevauchent les pseudo-éléments pour simuler un cube complet. L'animation donne vie au chargeur.

Une représentation visuelle clarifie les calculs clip-path : (le diagramme serait placé ici, similaire à l'original)

Codez-le. Tout d'abord, nous avons configuré l'élément .loader :

 .loader {--s: 150px; / * Contrôle de taille * / --_ d: calc (0,353 * var (- s)); / * 0,353 = sin (45DEG) / 2 * / largeur: calc (var (- s) var (--_ d)); Ratio d'aspect: 1; Affichage: flex; }  pre> <p> Suivant, les pseudo-éléments: </p> <pre class="brush:php;toolbar:false"> .loader :: avant, .Loadher :: après {contenu: ""; Flex: 1; } 

Appliquer le gradient conique:

 .loader :: avant, .loader :: après {fond: conique-gradient (de -90deg à calc (100% - var (--_ d)) var (--_ d), #fff 135deg, # 666 0 270deg, #aaa 0); }  pre> <p> Clip Le gradient: </p> <pre class="brush:php;toolbar:false"> .loader :: avant, .Loader :: après {clip-path: polygon (var (--_ d) 0, 100% 0, 100% calc (100% - var (--_ d)), calc (100% - var (--_ d)) 100%, 0 100%, 0 var (--_ d)); } 

chevauchent les moitiés en utilisant des marges négatives:

 .loader :: avant {margin-droite: calc (var (--_ d) / -2); } .loadher :: après {margin-left: calc (var (--_ d) / -2); }  pre> <p> Enfin, l'animation: </p> <pre class="brush:php;toolbar:false"> .loader :: avant, .loader :: après {animation: charger 1.5s infinie cubic-bezier (0, .5, .5, 1.8) alternative; } .loadher :: après {animation-delay: -.75s; } @KeyFrames Load {0%, 40% {transform: tradlatey (calc (var (- s) / -4)); } 60%, 100% {transform: tradlatey (calc (var (- s) / 4)); }} 

(La démo finale serait affichée ici)

Le chargeur de cube de progression

Adaptons cette technique pour un chargeur de progrès 3D - toujours avec un seul élément! La simulation du cube reste la même, mais nous ajustons la hauteur et le rapport d'aspect. L'animation utilise intelligemment Flex-Grow: 1 pour remplir l'espace restant à mesure que la largeur du côté gauche augmente.

Ajoutez de la transparence au côté droit:

 .Loader :: After {Opacity: 0.4; }  pre> <p> Modifiez la couleur du côté gauche à l'aide de <code> background-Color </code> et <code> background-mélange-mode </code>: </p> <pre class="brush:php;toolbar:false"> .loader :: avant {background-Color: # cc333f; Mode de mélange d'arrière-plan: multiplier; } notre } 95%, 100% {largeur: 100%; }} 

(une démonstration améliorée serait affichée ici, résolvant le problème de la face inférieure)

Le code complet, y compris la correction de la face inférieure: (le code complet serait inclus ici)

(autres exemples 3D et explications suivraient, similaire à l'original, en maintenant le placement de la création d'images et des effets minimales)

Cet. Expérimentez et créez vos propres variations!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!