chargement CSS3, qu'est-ce que cela signifie

Le chargement css3 fait référence à l'effet de chargement et de mise en mémoire tampon de css3. La méthode de chargement css : 1. Le chargement est réalisé via l'attribut transform ; 2. Le chargement est réalisé via l'attribut animation-direction, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Recommandé : Tutoriel vidéo CSS

Que signifie l'animation de chargement CSS3 ?

L'animation de chargement signifie chargement et mise en mémoire tampon.

De nombreuses personnes verront des animations lorsqu'elles joueront à des jeux. À ce moment-là, cela indiquera le chargement, ou elles seront mises en mémoire tampon lorsque le réseau n'est pas connecté. Les animations apparaissent lorsque le jeu apparaît ou lorsqu'il y a un problème. avec le joueur.

Peut-être en raison de la grande taille de la page Web, ou en raison de l'utilisation de bibliothèques frontales telles que vue, les téléspectateurs rencontrent souvent un écran blanc pendant un certain temps lors de l'ouverture de la page Web. L'approche consiste à attendre que la première page de la page Web soit terminée. Lorsque l'écran est rendu, une animation de chargement est présentée à l'utilisateur et l'animation de chargement est masquée une fois la page rendue.

Plusieurs animations de chargement implémentées en CSS pur

Nous allons maintenant vous présenter quelques animations CSS très simples

Tout d'abord, le premier est le plus simple. HTML ne nécessite qu'une seule balise et CSS ne contient que quelques lignes. Parlons brièvement de l'idée : définissez la largeur et la hauteur d'un élément sur des valeurs égales, définissez le rayon de bordure à 50 % pour en faire un cercle, définissez la couleur d'arrière-plan sur transparent, ajoutez quelques pixels de bordure à l'élément, et faites-le correspondre avec La couleur que vous aimez. Il convient de noter qu'ici, vous devez définir la bordure d'un côté pour qu'elle soit transparente pour la faire ressembler à un anneau avec seulement trois quarts, puis l'animer pour la faire bouger. Le réglage transform:translate(-50%,-50%) pour un élément positionné, combiné avec 50% du haut et de la gauche, peut centrer l'élément horizontalement et verticalement. La raison pour laquelle traduire(-50%,-50%) est écrit sous forme et vers est que si vous écrivez "transform:translate(-50%,-50%)" directement sur l'élément, vous écrirez également "translate: translation(-50%,-50%)" dans l'animation. transform:rotate(0deg)" écrasera l'attribut de transformation sur l'élément et l'empêchera d'être centré.

La deuxième idée est de construire trois cercles côte à côte et de définir un certain délai d'animation pour donner aux trois cercles la sensation d'être l'un après l'autre infini, ce qui signifie que l'animation sera jouée à l'infini, et des moyens alternatifs. que l'animation sera jouée du début à la fin, puis de la fin au début.

Le troisième type est légèrement plus compliqué que les deux premiers. Ici, huit cercles positionnés de manière absolue sont utilisés, et l'attribut de transformation est utilisé pour les déplacer un par un du centre vers le bord. deux et le centre du cercle est L'angle est de 45 degrés, donc en tournant d'un multiple de 45 degrés puis en traduisant une certaine distance à l'impact des différents ordres sur les résultats). Ensuite, définissez simplement le délai d'animation pour chaque règle de cercle. L'animation ici utilise des changements de largeur et de hauteur sans échelle, car transform:scale() écrasera l'attribut de transformation qui a été défini auparavant, empêchant les cercles de s'étaler.

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!