Implémenter un écran squelette simple en utilisant CSS-tutoriel CSS-php.cn

Implémenter un écran squelette simple en utilisant CSS

Guanhui

Libérer： 2020-06-18 13:04:42

avant

6168 Les gens l'ont consulté

Avant-propos

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)

Idées

Squelette HTML
CSS plus style
CSS plus animation

Commencez par construire le squelette

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=&#39;screen-root&#39;>
  <ul>
    <li/>
    <li/>
    <li/>
  </ul></p>

Copier après la connexion

Ecoute, c'est aussi simple que ça.

Coloration CSS

L'écran squelette que nous voyons souvent ressemble à ceci

Implémenter un écran squelette simple en utilisant CSS

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 ici
li{    background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%);    width: 100%;    height: 0.6rem;    list-style: none;
}
Copier après la connexion

En utilisation réelle, changez la carte de dégradé en une couleur normale, telle que :
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)

Faites-le bouger

La seule chose qui reste à faire est de faire bouger le green du milieu

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%;
  }
}

Copier après la connexion

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

Lorsque vous utilisez le pourcentage pour définir la valeur

, 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

Certains élèves peuvent se demander, définir la valeur

à 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%;
  }
}

Copier après la connexion

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