L'effet Glimmer est un effet animé que de nombreux sites Web ajoutent à leurs indicateurs de chargement. C'est l'illusion de mouvement dans une page Web ou un élément HTML.
Nous pouvons créer des effets de scintillement en utilisant diverses propriétés CSS telles que des dégradés linéaires, des images clés, des animations, la position de l'arrière-plan, des transformations, etc. Fondamentalement, l’effet chatoyant ajoute des lignes mobiles alternées de lumière et d’obscurité.
Ici, nous allons apprendre à créer un effet chatoyant en utilisant CSS.
Grammaire
Les utilisateurs peuvent créer des effets chatoyants en utilisant CSS selon la syntaxe suivante.
.shimmer-div {
background: linear-gradient
animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
from {
transform: translateX(percentage);
}
to {
transform: translateX(percentage);
}
}
Copier après la connexion
Dans la syntaxe ci-dessus, nous avons ajouté un dégradé linéaire comme arrière-plan dans l'élément div et ajouté une animation à l'aide d'images clés chatoyantes.
Nous déplaçons le div de gauche à droite dans l'image clé chatoyante pour créer l'effet chatoyant.
Exemple
Dans l'exemple ci-dessous, nous avons un div conteneur comme div parent. À l’intérieur de l’élément div parent, nous avons ajouté plusieurs éléments box et divs avec le nom de classe « shimmer ». De plus, nous avons appliqué du CSS sur l'élément div.
En CSS, nous animons l'élément div chatoyant avec un dégradé linéaire en arrière-plan, en largeur et en images clés chatoyantes. Nous utilisons la propriété CSS transform dans l'image clé shimmer pour déplacer l'élément shimmer div de - 230 % à 230 %.
Dans la sortie, l'utilisateur peut observer des lignes mobiles sur l'élément div parent, ce que l'on appelle l'effet de scintillement.
<html>
<head>
<style>
.container {
background: grey;
display: flex;
width: 600px;
position: relative;
height: 100px;
box-sizing: border-box;
border-radius: 10px;
}
.box {
height: 90px;
width: 90px;
background: #ddd;
margin: 5px 20px;
border-radius: 8px;
}
.shimmer-div {
width: 30%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(120deg,
rgba(255, 255, 0, 0.2) 30%,
rgba(255, 255, 0, 0.2) 50%,
rgba(255, 0, 255, 0.2) 80%);
animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
from {transform: translateX(-230%);}
to {transform: translateX(230%);}
}
</style>
</head>
<body>
<h2>Adding the <i> Shimmer Effect </i> to the HTML element using CSS</h2>
<div class = "container">
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "shimmer-div"> </div>
</div>
</body>
</html>
Copier après la connexion
Exemple
Dans l'exemple ci-dessous, nous avons ajouté un effet de clignotement sur un élément image div. Ici, nous avons utilisé la propriété CSS « mask » au lieu de la propriété CSS « background ». Nous avons ajouté un dégradé linéaire comme valeur de la propriété CSS « -webkit-mask ».
Dans l'image clé chatoyante, nous utilisons "webkit-maskposition" à gauche pour définir la position du masque. Dans le résultat, les utilisateurs peuvent observer l’effet de scintillement dû à l’alternance de lignes claires et sombres sur l’image.
<html>
<head>
<style>
.shimmer-effect {
color: grey;
display: inline-block;
/* adding gradients */
-webkit-mask: linear-gradient(120deg, #000 25%, #0005, #000 75%) right/250% 100%;
/* shimmer effect animation */
animation: shimmer 2.5s infinite;
background-repeat: no-repeat;
width: 500px;
}
@keyframes shimmer {
100% {
/* setting up mask position at left side */
-webkit-mask-position: left
}
}
</style>
</head>
<body>
<h2>Adding the <i> Shimmer Effect </i> to the HTML element using CSS</h2>
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRox9t_onikXnOMmZ-gIWcD0mYq3Z4mAeKO3NeeBWjG&s" Class = "shimmer-effect" />
</body>
</html>
Copier après la connexion
Exemple
Dans l'exemple ci-dessous, nous avons ajouté un effet clignotant à l'indicateur de chargement. Tout d’abord, nous créons un indicateur de chargement en utilisant HTML et CSS. Après cela, nous appliquons un dégradé linéaire au div chatoyant en utilisant la propriété CSS background.
Dans l'image clé, nous faisons également pivoter le div chatoyant tout en le déplaçant dans la direction x positive. En sortie, l'utilisateur peut observer à quel point l'effet clignotant de l'indicateur de chargement est magnifique.
<html>
<head>
<style>
.loader {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 14px solid grey;
}
.shimmer {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);
animation: shimmer 2s infinite;
transform: rotate(90deg);
}
@keyframes shimmer {
0% {transform: translateX(-50%) rotate(45deg);}
100% {transform: translateX(50%) rotate(45deg);}
}
</style>
</head>
<body>
<h2>Adding the <i> Shimmer Effect </i> to the loading indicatorx using CSS</h2>
<div class = "loader">
<div class = "shimmer"> </div>
</div>
</html>
Copier après la connexion
Les utilisateurs ont appris à utiliser CSS pour ajouter un effet de scintillement aux pages Web. Dans le premier exemple, nous avons ajouté un effet de clignotement à un élément div. Dans le deuxième exemple, nous utilisons la propriété CSS "mask" pour ajouter un effet de scintillement sur un élément d'image. Dans l'exemple précédent, nous avons ajouté un effet clignotant à l'indicateur de chargement.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
