Vue réalise l'effet de défilement de chapiteau / texte

Implémentez les effets de défilement de marquee / texte dans Vue, vous pouvez utiliser des animations CSS ou des bibliothèques tierces. Cet article présente comment utiliser l'animation CSS: créer du texte de défilement et envelopper du texte avec . Définissez les animations CSS et Définissez le débordement: caché, largeur et animation. Définissez les images clés, définissez la transformée au début et à la fin de l'animation: tradlatex (). Ajustez les propriétés d'animation telles que la durée, la vitesse de défilement et la direction.

Vue réalise l'effet de défilement de chapiteau / texte

Comment y parvenir?

Implémentez les effets de défilement de marquee / texte dans Vue, vous pouvez utiliser des animations CSS ou des bibliothèques tierces. Cet article présentera comment utiliser l'animation CSS.

Étapes Explication détaillée:

1. Créer du texte de défilement: Dans un modèle Vue, enveloppez le texte qui doit être défilé, par exemple: <div class="marquee"><p>{{ text }}</p></div> .
2. Définir l'animation CSS: dans la balise <style></style> , définissez l'animation CSS, par exemple:

 <code class="css">.marquee { overflow: hidden; width: 100%; white-space: nowrap; animation: marquee 10s infinite linear; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }</code>

• overflow: hidden masque le texte au-delà de la partie conteneur.
• width: 100% Définissez la largeur du conteneur sur une largeur de texte égale.
• animation définit le nom de l'animation, la durée, le nombre de répétitions et le mode de lecture.
• @keyframes définit l'image clé d'animation, 0% signifie lorsque l'animation démarre et 100% signifie la fin de l'animation.

3. Ajustez les propriétés d'animation: ajustez les propriétés d'animation au besoin, telles que la durée, la vitesse de défilement ou la direction.

Exemple:

 <code class="vue"><template> <div class="marquee"><p>{{ text }}</p></div> </template> <script> export default { data() { return { text: &#39;这是一条跑马灯&#39; }; } }; </script> <style> .marquee { overflow: hidden; width: 100%; white-space: nowrap; animation: marquee 10s infinite linear; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style></code>

Avis:

• La vitesse de défilement peut être contrôlée en ajustant la durée de l'animation.
• La direction de défilement peut être contrôlée en modifiant le symbole de la valeur dans transform: translateX() , comme transform: translateX(100%) pour faire défiler le texte vers la droite.
• La distance de défilement peut être contrôlée en ajustant la largeur du récipient afin que la largeur du conteneur soit plus petite que la largeur du 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!