labo. 01 - exercice 07

Lien animé #4

Vous en voulez plus? Voici un autre effet intéressant.

Réutilisabilité et ajustement

La structure HTML est déjà fournie. Veuillez prendre le temps de regarder et d'analyser le fichier partials/_ex07.html

Nous avons ajouté la classe .link-item--underline-reverse en plus à un lien ayant déjà .link-item--underline.

État de survol

Nous allons simplement modifier la transformation de la ligne pour changer l'effet d'animation. Les autres styles proviendront de .link-item--underline sans qu'on ait rien à faire.

Travaillons avec CE sélecteur .link-item--underline-reverse

Modifier la transformation du after pour une transformation qui permet d'étirer sur l' axe des X pour l'ajuster à 0.

Nous allons ajuster les styles sur l'état de survol de .link-item--underline-underline

Ajuster sur le hover la transformation inverse pour faire apparaitre la ligne.

😵 Nous avons le même effet qu'au numéro 3. Il faut travailler avec le point d'origine de la transformation pour modifier l'effet.

En savoir plus sur transform-origin

Sur l'état normal

Ajuster le transform origin pour left

😍 L'animation devrait maintenant commencer de la gauche vers la droite et revenir vers la gauche

Sur l'état de survol

Vous pouvez changer le transform-orgin sur le hover pour qu'il commence de la em et finisse vers la droite. Faite des essais pour y arriver.