Créer un carrousel de texte CSS pur lisse pur

Cet article vous guidera comment créer un carrousel de texte de transition en douceur à l'aide de CSS pure pour éviter les problèmes de chevauchement de texte. En ajustant l'animation de l'image clé, contrôlez l'attribut gauche de l'élément pour obtenir un effet de défilement transparent de droite à gauche. Nous fournirons des exemples de code détaillés et des étapes clés pour vous aider à construire facilement des composants de carrousel de texte magnifique et pratique.

Explication détaillée de la mise en œuvre du carrousel Pure CSS

Pour créer un carrousel de texte CSS pur, la clé consiste à utiliser @keyframes pour définir l'animation, et à contrôler l'affichage et la cachette du texte en ajustant l'attribut gauche de l'élément, réalisant ainsi l'effet du carrousel. Voici les étapes pour éviter le chevauchement du texte et implémenter une transition en douceur de droite à gauche:

1. Structure HTML:

   Tout d'abord, nous avons besoin d'un conteneur qui contient les articles du carrousel. Chaque élément de carrousel doit être un élément absolument positionné afin que nous puissions utiliser l'attribut gauche pour contrôler sa position.

    <div class="Trev-top-Bar Overflow-Hidden" style="Height: 56px;">
     <div class="contener-fluid">
       <div class="Row Position-relalative">
         <div class="Col-12 Col-MD TREV-TOP-BAR-Item Text-Center Position-Absolute">
           <i class="Trev-Top-Bar-Fa-Icon FA-Solid Fa-Truck-Fast"> </i> Expédition rapide
         </div>
   
         <div class="Col-12 Col-MD TREV-TOP-BAR-Item Text-Center Position-Absolute">
           <i class="Trev-top-Bar-Fa-Icon FA-Solid Fa-Arrow-Right-Arrow-left"> </i> 100 jours à droite
         </div>
   
         <div class="Col-12 Col-MD TREV-TOP-BAR-Item Text-Center Position-Absolute">
           <i class="Trev-Top-Bar-Fa-Icon-Icon FA-Solid FA-File-invoice-Dollar"> </i> Acheter avec facture
         </div>
   
         <div class="Col-12 Col-MD TREV-TOP-BAR-Item Text-Center Position-Absolute">
           <i class="Trev-top-Bar-Fa-Icon FA-Solid Fa-Gears"> </i> Qualité prouvée
         </div>
       </div>
     </div>
   </div>

2. Style CSS:

   • .Trev-TOP-BAR: Définit la couleur d'arrière-plan, la couleur du texte, la taille de la police et la marge intérieure. Overflow-Hidden garantit que le contenu est masqué lorsqu'il dépasse le conteneur.
   • .Trev-top-Bar-Item: Définit le centrage de texte et le positionnement absolu.
   • .Trev-TOP-BAR-FA-ICON: Définit la couleur de l'icône et la marge droite.

    .trev-top-bar {
     Color d'arrière-plan: # 256DFF;
     Couleur: #ffff;
     taille de police: 14px;
     Tableau de rembourrage: 1rem;
     Padding-Bottom: 1rem;
   }
   
   .trev-top-bar .Trev-top-Bar-item {
     Texte-aligne: Centre;
     Position: absolue;
   }
   
   .trev-top-bar .Trev-top-bar-fa-icon,
   .trev-top-bar .icon {
     Couleur: #ffff;
     marge-droite: .3rem;
   }
   
   .trev-top-bar .Trev-top-bar-fa-icon {
     taille de police: 16px;
   }
   
   .trev-top-bar .icon svg {
     Largeur: 16px;
     hauteur: 16px;
   }

3. Animation de l'image clé:

   C'est la partie fondamentale de la réalisation des effets de carrousel. Nous devons définir une animation d'image clé pour chaque élément de carrousel, le contrôler pour aller de la droite, afficher pendant un certain temps, puis sortir de la gauche.

    @keyframes top-bar-animation-1 {
     0% {
       Gauche: 100%;
     }
     8,33% {
       à gauche: 0;
     }
     16,66% {
       à gauche: 0;
     }
     24,99% {
       Gauche: -100%;
     }
     100% {
       Gauche: -100%;
     }
   }
   
   @KeyFrames Top-Bar-Animation-2 {
     0% {
       Gauche: 100%;
     }
     24,99% {
       Gauche: 100%;
     }
     33,33% {
       à gauche: 0;
     }
     41,66% {
       à gauche: 0;
     }
     49,99% {
       Gauche: -100%;
     }
     100% {
       Gauche: -100%;
     }
   }
   
   @KeyFrames Top-Bar-Animation-3 {
     0% {
       Gauche: 100%;
     }
     49,99% {
       Gauche: 100%;
     }
     58,33% {
       à gauche: 0;
     }
     66,66% {
       à gauche: 0;
     }
     74,99% {
       Gauche: -100%;
     }
     100% {
       Gauche: -100%;
     }
   }
   
   @KeyFrames Top-Bar-Animation-4 {
     0% {
       Gauche: 100%;
     }
     74,99% {
       Gauche: 100%;
     }
     83,33% {
       à gauche: 0;
     }
     91,66% {
       à gauche: 0;
     }
     100% {
       Gauche: -100%;
     }
   }

   • À gauche: 100%: l'élément est situé sur le côté droit du récipient et n'est pas visible.
   • À gauche: 0: L'élément est situé au centre du récipient et est visible.
   • Gauche: -100%: L'élément est situé sur le côté gauche du conteneur et n'est pas visible.

   Points clés: le pourcentage d'images clés pour chaque animation doit être soigneusement ajusté pour garantir que chaque élément a suffisamment de temps pour s'afficher avant de quitter l'écran. Dans le même temps, échelonne l'heure de début de l'animation de chaque élément pour créer un effet de carrousel continu.

4. Animation d'application:

   Appliquez l'animation de la clés définie à l'élément de carrousel correspondant.

    .Trev-TOP-BAR .TREV-TOP-BAR-ITEM: First-Child {
     -Webkit-animation: top-bar-animation-1 16s faciliter l'infini;
     Animation: Top-Bar-Animation-1 16S faciliter l'infini;
   }
   
   .trev-top-bar .Trev-top-bar-item: nth-child (2) {
     -Webkit-animation: top-bar-animation-2 16s facilite infini;
     Animation: Top-Bar-Animation-2 16S faciliter l'infini;
   }
   
   .trev-top-bar .Trev-top-Bar-item: nth-child (3) {
     -Webkit-animation: top-bar-animation-3 16s faciliter infini;
     Animation: Top-Bar-animation-3 16S Ease Infinite;
   }
   
   .Trev-TOP-BAR .TREV-TOP-BAR-ITEM: NTH-CHILD (4) {
     -Webkit-animation: top-bar-animation-4 16s facilite infini;
     Animation: top-bar-animation-4 16s faciliter l'infini;
   }

   • Animation: spécifie le nom de l'animation, la durée, la fonction d'assouplissement et le nombre de boucles.

Choses à noter

• Durée de l'animation: ajustez la durée de l'animation en fonction du nombre d'objets de carrousel et de la vitesse du carrousel attendu.
• Pourcentage de l'image clé: Ajustez soigneusement le pourcentage de clés pour s'assurer que chaque carrousel a suffisamment de temps pour afficher et éviter le chevauchement.
• Conception réactive: ajustez les styles à différentes tailles d'écran selon les besoins pour s'assurer que le carrousel fonctionne correctement sur tous les appareils.

Résumer

En utilisant un CSS pur et une animation de l'image clé, nous pouvons créer un carrousel de texte de transition en douceur pour éviter les problèmes de chevauchement du texte. Cette méthode est simple et facile à utiliser, ne nécessite aucun javascript et permet une personnalisation facile des styles et des effets d'animation. La clé est de comprendre le contrôle de l'attribut gauche et le synchronisation de l'animation de l'image clé. En ajustant ces paramètres, divers effets de carrousel peuvent être obtenus.

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!