Maison > Article > interface Web > Comment créer une animation de révélation de texte coulissant en utilisant HTML et CSS ?

Comment créer une animation de révélation de texte coulissant en utilisant HTML et CSS ?

王林avant: 2023-09-07 16:53:02735parcourir

Vous avez peut-être vu une animation d'affichage de texte coulissant sur différents sites Web (tels que des sites Web de portfolio personnel) ou même différents contenus vidéo, ce qui offre aux utilisateurs une expérience différente et rend le texte plus vivant. Des animations de texte coulissant peuvent être facilement créées en utilisant HTML et CSS, ce qui attirera l'attention des utilisateurs visitant notre site Web.

Dans cet article, nous allons apprendre à créer une animation d'affichage de texte coulissant en utilisant uniquement HTML et CSS

Comment réaliser une animation glissante ?

Parlons des méthodes que vous pouvez utiliser pour créer des animations coulissantes. Le début de l'animation affichera notre premier texte, en l'occurrence "Bonjour", puis le texte glissera vers la gauche puis en glissant vers la droite le deuxième texte "Comment s'est passée ta journée"

Nous utiliserons les propriétés des images clés pour diviser l'animation en différentes parties afin que l'animation finale soit plus fluide. Examinons la syntaxe des propriétés des images clés.

Grammaire

@keyframes appear
@keyframes slide
@keyframes reveal

Vous pouvez voir dans le code ci-dessus que l'attribut keyframe est utilisé. Dans l'image clé qui apparaît, nous définirons la manière dont le premier texte est affiché.

Dans la diapositive d'image clé, nous déplacerons le texte horizontalement.
Dans l'affichage des images clés, nous afficherons tout le reste du texte.

Exemple

Pour mieux comprendre ce que fait cette propriété, regardons un exemple de création d'une animation.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example of</title>
      <style>
         .container {
            overflow: hidden;
            width: 80%;
            margin: 0 auto;
            padding: 20px;
         }
         .slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
         }
         .slide {
            width: 100%;
            text-align: center;
            font-size: 72px;
            font-weight: bold;
            color: #333;
         }
         .slider.slide-1 {
            transform: translateX(0%);
         }
         .slider.slide-2 {
            transform: translateX(-100%);
         }
         .slider.slide-3 {
            transform: translateX(-200%);
         }
      </style>
   </head>
   <body>
      <div class="container">
      <div class="slider">
      <div class="slide">A</div>
      <div class="slide">B</div>
      <div class="slide">C</div>
      <div class="slide">D</div>
      <div class="slide">E</div>
      <div class="slide">F</div>
      </div>
      </div>
      <script>
         var currentSlide = 1;
         var slider = document.querySelector('.slider');
         setInterval(function () {
            currentSlide++;
            if (currentSlide > 26) {
               currentSlide = 1;
            }
            slider.classList.remove('slide-' + (currentSlide - 1));
            slider.classList.add('slide-' + currentSlide);
         }, 1000);
      </script>
   </body>
</html>

Dans le code ci-dessus, nous avons créé une animation qui affiche les lettres avec un temps de transition de 0,5 seconde, l'utilisateur peut ajuster l'intervalle de temps et la taille de la police en fonction de son cas d'utilisation spécifique.

La sortie peut être modifiée en modifiant le nombre de lettres et les lettres elles-mêmes à l'aide de HTML et CSS, ou l'utilisateur peut utiliser JavaScript pour créer un tableau et le parcourir facilement.

Exemple

Dans cet exemple, nous effectuerons quelques styles de base, tels que l'ajout d'une couleur d'arrière-plan, la définition de l'alignement, etc. Ensuite, nous allons utiliser les propriétés d'animation, puis nous utiliserons des images clés pour animer chaque image afin d'obtenir une sortie plus fluide.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example of using the keyframe</title>
      <style>
         body {
            background: black;
         }
         .text {
            width: 20%;
            top: 50%;
            position: absolute;
            left: 40%;
            border-bottom: 5px solid white;
            overflow: hidden;
            animation: animate 2s linear forwards;
         }
         .text h1 {
            color: white;
         }
         @keyframes animate {
            0% {
               width: 0px;
               height: 0px;
            }
            30% {
               width: 50px;
               height: 0px;
            }
            60% {
               width: 50px;
               height: 80px;
            }
         }
      </style>
   </head>
   <body>
      <div class="text">
      <h1> Hi How's your day going?<h1>
   </body>
</html>

Le code ci-dessus est le code combiné et il nous donnera le résultat suivant

Voici à quoi ressemble notre sortie après avoir utilisé le code HTML et CSS.

Conclusion

Les images clés peuvent être utilisées pour spécifier des règles pour des images spécifiques, et nous pouvons également utiliser différents styles à l'intérieur de celles-ci afin que les propriétés changent à chaque fois. La spécification des images clés se fait à l'aide de pourcentages, tels que 0 % (début de l'animation) et 100 % (fin de l'animation), et les règles peuvent également avoir "de" ou "à" signifiant également le début et la fin. L'animation se termine.

Dans cet article, nous avons appris à créer une animation de glissement de texte en utilisant HTML et CSS.

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!

JavaScript css html 循环

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Base de données indexée en HTML5Article suivant：Base de données indexée en HTML5

Articles Liés

Voir plus