Comment puis-je créer un effet de sélection CSS3 réactif sans valeurs codées en dur ?

Effet de sélection en CSS3 : éviter les valeurs spécifiques pour l'adaptation du texte

Dans l'animation CSS3, il est souvent souhaitable de créer un effet de sélection, où le texte défile sur l’écran. Cependant, en utilisant des valeurs spécifiques telles que "margin-left: -4200px;" car l'indentation du texte peut être restrictive pour différentes longueurs de texte.

Une approche pour éviter ce problème consiste à envelopper le texte dans un élément span et à utiliser la propriété "padding-left" à la place :

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%; /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

Cela permet à l'animation de s'adapter à la largeur du texte, garantissant qu'il défile entièrement sur l'écran. De plus, l'état « survol » peut être utilisé pour mettre l'animation en pause lorsque l'utilisateur survole le texte :

.marquee span:hover {
  animation-play-state: paused;
}

Enfin, pour respecter les préférences de l'utilisateur, ce code implémente le média "préfère-reduced-motion" requête, qui réduit la vitesse d'animation ou la désactive complètement pour les utilisateurs qui préfèrent moins de mouvement.

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!