Comment créer un effet de chapiteau réactif avec une animation CSS3 ?

Comment puis-je créer un effet de sélection réactif avec une animation CSS3 ?

Les animations CSS3 offrent un moyen puissant d'ajouter du mouvement aux éléments de votre site Web. L'une des applications les plus courantes est l'effet de sélection, où le texte défile sur l'écran. Cependant, créer un effet de sélection qui s'adapte à un texte de n'importe quelle longueur peut s'avérer difficile.

Tentatives précédentes

Les approches traditionnelles de création d'effets de sélection reposent souvent sur des valeurs fixes telles que margin-left:-4200px; . Bien que cela fonctionne pour des tailles de texte spécifiques, cela devient problématique lorsque la longueur du texte varie.

Adapter l'approche

L'utilisation d'un balisage légèrement modifié, avec une étendue imbriquée dans le paragraphe, permet une solution réactive. Voici l'approche mise à jour :

.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;

  padding-left: 100%;
  will-change: transform;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

Dans cette approche, la largeur de l'étendue est définie sur « max-content », garantissant qu'elle s'adapte à la longueur du texte. Le remplissage gauche est utilisé pour déplacer le texte en dehors de la zone visible, et l'animation traduit le texte à nouveau, créant ainsi l'effet de sélection.

Respect des préférences de l'utilisateur

Pour des problèmes d'accessibilité, le le code respecte les préférences de l'utilisateur concernant le mouvement. si l'utilisateur préfère un mouvement réduit, l'animation est désactivée.

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01s;
    width: auto;
    padding-left: 0;
  }
}

En incorporant ces techniques, vous pouvez créer un effet de sélection réactif qui s'adapte à n'importe quelle quantité de texte, améliorant ainsi la flexibilité et l'accessibilité de votre conception.

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!