Comment créer un chapiteau CSS dynamique avec une longueur de texte adaptable ?

Comment créer un effet de sélection dynamique avec une longueur de texte adaptable

En CSS3, obtenir un effet de sélection nécessite une animation, mais en utilisant des valeurs spécifiques, tel que margin-left:-4200px;, limite son adaptabilité à du texte de différentes longueurs.

Pour surmonter cette limitation, un balisage une modification est nécessaire. Pensez à créer un élément span dans le paragraphe de sélection. Ce petit changement permet d'utiliser la propriété CSS max-content pour définir la largeur de l'élément span en fonction de son contenu, garantissant ainsi qu'il peut accueillir du texte de n'importe quelle longueur.

Pour créer l'animation, appliquez une transition de transformation à l'étendue, en la déplaçant de la droite du paragraphe vers la gauche, créant ainsi l'effet de sélection.

En spécifiant une animation basée sur un pourcentage, il s'ajuste dynamiquement à la largeur de l'étendue, éliminant le besoin d'une marge spécifique valeurs. De plus, la propriété will-change optimise les performances en informant le navigateur de l'animation imminente.

Pour empêcher l'animation en survol, ajoutez animation-play-state: paused; à l'état :hover.

Tenez compte des préférences de l'utilisateur en appliquant des animations uniquement si le navigateur préfère les animations. Sinon, animation : aucune ; serait utilisé pour afficher du texte immobile sans avoir à supprimer manuellement les écouteurs d'événements.

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!