De nos jours, l'animation est la fonctionnalité la plus puissante d'une application pour attirer plus d'utilisateurs, elle augmente l'intérêt des utilisateurs pour l'exploration de l'application. Dans les applications Web, nous pouvons créer des animations en utilisant HTML et CSS. Cependant, nous pouvons créer des animations en utilisant JavaScript, mais cela ralentira le site Web.
Dans ce tutoriel, nous apprendrons à charger une animation de texte en utilisant HTML et CSS. Lors de l’obtention de données depuis une API ou du chargement d’une page Web, il est important d’animer le texte de chargement pour le rendre plus attrayant.
Exemple 1
Dans l'exemple ci-dessous, nous avons créé les éléments div « loader » et « loader-inner » en son sein. En CSS, nous donnons au div du chargeur une taille fixe et l'animons à l'aide de l'image clé "rotation". Nous fixons la durée de l'animation à 3 secondes.
De plus, nous avons défini des images clés de rotation interne pour l’élément div interne du chargeur et la position dans l’élément div du chargeur.
Dans les images clés Rotation et Rotation interne, nous déplaçons le chargeur de 0 degrés à 360 degrés. Les utilisateurs peuvent observer le chargeur en rotation dans la sortie, avec le texte de chargement au milieu.
<html>
<head>
<style>
.loader {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px dotted green;
position: relative;
animation: rotation 3s linear infinite;
}
.loader-inner {
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
border-block: 6px solid yellow;
top: 10px;
left: 10px;
animation: rotation-inner 3s linear infinite;
}
.loader-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotation {
from { transform: rotate(0deg);}
to { transform: rotate(360deg);}
}
@keyframes rotation-inner {
from { transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS </i></h2>
<div class = "loader">
<div class = "loader-inner"> </div>
<div class = "loader-text"> Loading </div>
</div>
</body>
</html>
Copier après la connexion
Exemple 2
Dans l'exemple ci-dessous, nous avons créé une barre de chargement. Ici, nous avons créé un élément div de chargeur et un élément div de barre à l'intérieur. Nous avons défini la taille de l'élément div du chargeur et l'animation de l'élément bar en CSS.
Nous utilisons des images clés "bar-animation" pour animer. Dans "bar-animation", nous modifions la largeur de l'élément div pour qu'il se comporte comme une barre de chargement.
<html>
<head>
<style>
.container { width: 200px; }
.loader {
width: 200px;
height: 15px;
position: relative;
overflow: hidden;
border: 2px solid blue;
border-radius: 5px;
}
.bar {
width: 0%;
height: 100%;
background-color: green;
animation: bar-animation 5s ease-in-out infinite;
}
span {
font-size: 1.3rem;
display: flex;
justify-content: center;
color: green;
}
@keyframes bar-animation {
0% {width: 0%;}
50% {width: 100%;}
100% {width: 0%;}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
<div class = "container">
<div class = "loader">
<div class = "bar"> </div>
</div>
<span> Loading </span>
</div>
</body>
</html>
Copier après la connexion
Exemple 3
Dans l'exemple ci-dessous, nous avons créé un texte de chargement par rebond. Ici, nous ajoutons chaque caractère du mot Loading dans un élément div distinct. Après cela, nous animons tous les personnages à l'aide d'images clés "animation". Dans l'image clé "Animation", nous modifions la position verticale du personnage.
De plus, nous avons utilisé la méthode « n-th-child() » pour accéder à tous les éléments div un par un et définir le délai d'animation. Dans la sortie, l’utilisateur peut observer le texte de chargement rebondissant.
<html>
<head>
<style>
.char {
font-size: 44px;
color: blue;
display: inline-block;
transition: all 0.9s;
animation: animate 1.5s infinite;
}
.char:nth-child(1) {animation-delay: 0.1s;}
.char:nth-child(2) {animation-delay: 0.3s;}
.char:nth-child(3) {animation-delay: 0.4s;}
.char:nth-child(4) {animation-delay: 0.5s;}
.char:nth-child(5) {animation-delay: 0.6s;}
.char:nth-child(6) {animation-delay: 0.8s;}
.char:nth-child(7) {animation-delay: 0.9s;}
.char:nth-child(8) {animation-delay: 1s;}
.char:nth-child(9) {animation-delay: 1.2s;}
.char:nth-child(10) {animation-delay: 1.4s;}
@keyframes animate {
0% {transform: translateY(0);}
40% {transform: translateY(-20px);}
100% {transform: translateY(0);}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
<div class="allLetters">
<div class = "char"> L </div>
<div class = "char"> o </div>
<div class = "char"> a </div>
<div class = "char"> d </div>
<div class = "char"> i </div>
<div class = "char"> n </div>
<div class = "char"> g </div>
<div class = "char"> . </div>
<div class = "char"> . </div>
<div class = "char"> . </div>
</div>
</body>
</html>
Copier après la connexion
Exemple 4
Dans l'exemple ci-dessous, nous avons ajouté un effet de flou sur le texte de chargement. Ici, nous ajoutons chaque caractère du mot de chargement dans un élément "span" distinct. Après cela, nous accédons à chaque élément span un par un en utilisant la méthode CSS 'n-th-child()' pour ajouter une animation. Dans l'élément span, nous avons ajouté une animation "texte flou" avec un délai d'animation spécifique.
Dans les images clés d'animation, nous appliquons un filtre de flou au texte pour afficher un effet de flou courant sur le texte chargé.
<html>
<head>
<style>
span {font-size: 2rem; color: green;}
/* adding blur animation effect on each character of loading text one by one */
span:nth-child(1){animation: blur-text 4s ease-in-out infinite;}
span:nth-child(2){animation: blur-text 4s ease-in-out infinite 0.3s;}
span:nth-child(3){animation: blur-text 4s ease-in-out infinite 0.5s;}
span:nth-child(4){animation: blur-text 4s ease-in-out infinite 0.9s;}
span:nth-child(5){animation: blur-text 4s ease-in-out infinite 1.3s;}
span:nth-child(6){animation: blur-text 4s ease-in-out infinite 1.6s;}
span:nth-child(7){animation: blur-text 4s ease-in-out infinite 2s;}
@keyframes blur-text {
0% {filter: blur(0px);}
50% {filter: blur(4px);}
100% {filter: blur(0px);}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
<div class = "allLetters">
<span> L </span>
<span> O </span>
<span> A </span>
<span> D </span>
<span> I </span>
<span> N </span>
<span> G </span>
</div>
</body>
</html>
Copier après la connexion
Les utilisateurs ont appris 4 types différents d'animations de chargement dans ce didacticiel. Dans le premier exemple, nous créons un indicateur de chargement rotatif avec du texte. Dans le deuxième exemple, nous créons une barre de chargement. De plus, dans le troisième exemple, nous avons créé un texte à chargement rebond et dans le dernier exemple, nous avons ajouté un effet de flou au texte.
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)
