Comment créer du texte à défilement horizontal en CSS-tutoriel CSS-php.cn

Comment créer du texte à défilement horizontal en CSS

WBOY

Libérer： 2021-12-09 11:54:09

original

5592 Les gens l'ont consulté

En CSS, les règles d'images clés, les attributs d'animation et de transformation peuvent être utilisés pour faire défiler le texte horizontalement. La syntaxe est "élément {animation : nom heure}@nom d'images clés {100%{transform : traduireX (distance de défilement)}}".

Comment créer du texte à défilement horizontal en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment créer du texte à défilement horizontal en CSS

En CSS, si vous souhaitez réaliser un texte à défilement horizontal, vous devez utiliser l'attribut d'animation et la règle @keyframes pour obtenir l'effet d'animation de la mise à l'échelle des éléments via le. Règle @keyframes, vous pouvez créer des animations.

Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation.

Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Il existe également un attribut de transformation utilisé pour définir l'effet du défilement du texte. La propriété transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div{
        width:200px;
  border:1px solid #000;
  overflow:hidden;
      }
p{
animation:fadenum 5s infinite;
}
@keyframes fadenum{
  0%{transform:translateX(200px);}
   100%{transform:translateX(-200px);}
}
</style>
</head>
<body>
<div><p>这是段横向滚动的文字文字</p></div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment créer du texte à défilement horizontal en CSS