Maison >interface Web >tutoriel CSS >Implémenter un écran squelette simple en utilisant CSS
Lors du chargement des données réseau, afin d'améliorer l'expérience utilisateur, une animation de chargement qui tourne en cercles ou un écran squelette est généralement utilisée. Comparé à l'animation de chargement, Skeleton Screen a un effet plus vif et est également très simple à mettre en œuvre. Vous pouvez implémenter un simple écran squelette en utilisant CSS. (Qu'est-ce que Skeleton Screen ?)
Apprentissage recommandé : Tutoriel vidéo CSS, Tutoriel CSS (images et texte)
Squelette HTML
CSS plus style
CSS plus animation
La structure du squelette est très simple, placez simplement au hasard quelques éléments de niveau bloc que vous aimez et c'est ok.
<p class='screen-root'> <ul> <li/> <li/> <li/> </ul></p>
Ecoute, c'est aussi simple que ça.
L'écran squelette que nous voyons souvent ressemble à ceci
Pour faciliter la description, pour pour améliorer le contraste, je vais d'abord créer une version fantôme de
Tout d'abord, utilisez l'attribut linear-gradient
du CSS pour dessiner un dégradé de rouge. avec un peu de vert. Image, et remplissez-la comme arrière-plan de la balise li
linear-gradient() peut créer une image avec un dégradé linéaire de plusieurs couleurs si vous voulez savoir. plus, vous pouvez voir icili{ background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; height: 0.6rem; list-style: none; }
En utilisation réelle, changez la carte de dégradé en une couleur normale, telle que :Faites-le bouger La seule chose qui reste à faire est de faire bouger le green du milieu
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)
Pouvez-vous penser à un comment le faire bouger ?Ce qui est utilisé ici est d'étirer l'image d'arrière-plan, de définir dynamiquement le pourcentage de positionnement de l'arrière-plan, de modifier le positionnement de l'arrière-plan et de calculer les différentes valeurs de décalage de l'image par rapport au conteneur, obtenant ainsi l'effet d'animation.
li{ background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; height: 0.6rem; list-style: none; background-size: 400% 100%; background-position: 100% 50%; animation: skeleton-loading 1.4s ease infinite; } @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }Ici, deux valeurs sont définies pour l'attribut
. La première valeur représente le décalage de la position horizontale par rapport au conteneur, et la deuxième valeur représente le décalage de la position verticale par rapport au conteneur. récipient. background-position
, il exécutera une formule pour calculer la valeur de positionnement réelle background-position
, c'est-à-dire que la différence de largeur entre le conteneur et l'image est multipliée par le pourcentage défini valeur de positionnement, et le résultat est le décalage réel. En décalant la valeur, l'un des objectifs de la définition de la largeur de (container width - image width) * (position x%) = (x offset value)
à 400 % est de créer une différence de largeur avec le conteneur. background-size
à 50 % peut également créer une différence de largeur avec le conteneur. Oui, mais de cette façon, l'image d'arrière-plan recouvrira tout le conteneur et vous serez surpris de constater que le point vert devient un double. background-size
Vous pouvez essayer de définir différentes valeurs pour la taille de l'arrière-plan, observer ses performances et réfléchir à la raison pour laquelle cela se produit.Enfin, utilisez l'animation d'images clés pour définir la valeur de
à la coordonnée x de background-position
à 100%
0%
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }Supposons que la largeur du conteneur soit
, puis l'arrière-plan La largeur de l'image est 100px
En utilisant la formule ci-dessus, dans la première image de l'animation, le décalage réel de l'image d'arrière-plan par rapport au conteneur est 400px
(100px-400px)*100% = -300pxLe décalage réel de. la dernière image est
(100px-400px)*0% = 0Le processus d'animation est en fait le processus dans lequel le décalage d'une image d'arrière-plan linéaire 3 fois la largeur du conteneur passe de
à -300px
par rapport au conteneur. 0
Autres recommandations de didacticiels connexes : "Tutoriel d'introduction au didacticiel de programmation PHP"
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!