Comment créer une animation de révélation de texte coulissant en utilisant HTML et CSS ?-tutoriel HTML-php.cn

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

王林

Libérer： 2023-09-07 16:53:02

avant

758 Les gens l'ont consulté

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

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

Copier après la connexion

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>

Copier après la connexion

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. < /p>

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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

Comment réaliser une animation glissante ?

Grammaire

Exemple

Exemple

Conclusion