Conseils et méthodes pour obtenir un effet de défilement de texte avec CSS

Conseils et méthodes pour obtenir un effet de défilement de texte avec CSS

Dans la conception Web, l'effet de défilement de texte peut augmenter la vitalité et l'attractivité de la page et offrir aux utilisateurs une meilleure expérience visuelle. Normalement, nous pouvons utiliser CSS pour obtenir un effet de défilement de texte, afin que le texte défile sur la page dans une animation fluide.

Cet article présentera quelques techniques et méthodes courantes pour vous aider à obtenir des effets de défilement de texte et fournira des exemples de code spécifiques. Voyons comment procéder ensuite.

1. Obtenez un effet de défilement de texte à l'aide de l'animation CSS :

L'animation CSS est un outil simple mais puissant pour ajouter des effets d'animation aux éléments. Pour réaliser le défilement du texte, nous pouvons utiliser les règles CSS @keyframes et les propriétés d'animation. Voici un exemple qui montre comment utiliser l'animation CSS pour obtenir l'effet de défilement du texte de droite à gauche :

@keyframes scroll {
  0% {
    transform: translateX(100%);  /* 初始位置: 在容器右侧 */
  }
  100% {
    transform: translateX(-100%); /* 结束位置: 在容器左侧 */
  }
}

.scroll-text {
  animation: scroll 5s linear infinite;  /* 动画名称、持续时间、动画类型和循环播放 */
  white-space: nowrap;  /* 防止文字换行 */
  overflow: hidden;  /* 隐藏超出容器的文字 */
}

Dans l'exemple ci-dessus, nous avons défini une image clé nommée "scroll" pour définir la position initiale de l'élément de texte et la fin. position. Ensuite, en appliquant l'animation à l'élément de classe "scroll-text", l'effet de défilement du texte de droite à gauche est obtenu.

2. Utilisez la propriété CSS transform pour obtenir un effet de défilement de texte :

La propriété transform peut être utilisée pour traduire, mettre à l'échelle, faire pivoter ou incliner des éléments. Lors de l'implémentation d'effets de défilement de texte, nous pouvons utiliser la fonction translateX() pour modifier la position horizontale de l'élément. Voici un exemple qui montre comment utiliser l'attribut transform pour obtenir l'effet de défilement du texte de gauche à droite :

.scroll-text {
  animation: scroll 5s linear infinite;  /* 动画名称、持续时间、动画类型和循环播放 */
  white-space: nowrap;  /* 防止文字换行 */
  overflow: hidden;  /* 隐藏超出容器的文字 */
  transform: translateX(100%);  /* 初始位置: 在容器右侧 */
}

@keyframes scroll {
  0% {
    transform: translateX(100%);  /* 初始位置: 在容器右侧 */
  }
  100% {
    transform: translateX(-100%); /* 结束位置: 在容器左侧 */
  }
}

Dans l'exemple ci-dessus, nous définissons la position initiale sur le côté droit du conteneur, puis traduisons le texte sur le côté droit du conteneur dans une animation d'image clé. Sur le côté gauche du conteneur, le texte défile de gauche à droite.

3. Utilisez la propriété Marquee de CSS pour obtenir un effet de défilement de texte :

En plus d'utiliser les propriétés d'animation et de transformation, CSS fournit également la propriété Marquee pour obtenir un effet de défilement de texte. Il s'agit d'une méthode pratique et simple qui ne nécessite pas l'écriture de code d'animation complexe. Voici un exemple qui montre comment utiliser la propriété Marquee pour obtenir l'effet de défilement du texte de droite à gauche :

.scroll-text {
  white-space: nowrap;  /* 防止文字换行 */
  overflow: hidden;  /* 隐藏超出容器的文字 */
  width: 100%;  /* 设置容器的宽度 */
  marquee-direction: left;  /* 设置滚动方向为向左 */
  animation: scroll 5s linear infinite;  /* 动画名称、持续时间、动画类型和循环播放 */
}

@keyframes scroll {
  0% {
    transform: translateX(100%);  /* 初始位置: 在容器右侧 */
  }
  100% {
    transform: translateX(-100%); /* 结束位置: 在容器左侧 */
  }
}

Dans l'exemple ci-dessus, nous utilisons la propriété Marquee pour définir la largeur et la direction de défilement du conteneur. Ensuite, le texte défile de droite à gauche grâce à une animation d’images clés pour obtenir l’effet de défilement de texte.

Pour résumer, nous avons introduit plusieurs techniques et méthodes pour utiliser CSS pour obtenir un effet de défilement de texte, notamment l'utilisation de l'animation CSS, de l'attribut de transformation et de l'attribut Marquee. J'espère que cet article pourra vous aider à obtenir un effet de défilement de texte attrayant et à améliorer l'expérience utilisateur de vos pages Web.

(Remarque : les exemples de code ci-dessus sont uniquement à titre de référence. Veuillez ajuster et optimiser en fonction des besoins spécifiques des applications réelles.)

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!