Adam Argyle

En parcourant Codepen, je suis tombé sur un effet de volant CSS captivant par Adam Argyle. La sensation de l'application de la démo, en particulier la couleur de fond en douceur, passant en douceur de gauche à droite, puis sortant de droite à gauche, a immédiatement attiré mon attention. J'ai passé un bon tout en le recréant, un processus qui a mis en évidence l'utilisation élégante de transitions, de transformations et de compensations.

Mon approche initiale s'est concentrée sur les transitions de fond, la manipulation background-size et background-position . Cependant, je n'ai pas pu atteindre le mouvement bidirectionnel souhaité.

Ensuite, j'ai exploré CSS Transforts. Alors que scaleX() a offert un potentiel, l'appliquant directement à l'élément de liaison a modifié le contenu, un résultat indésirable. La solution? Un pseudo-élément!

Voici mon implémentation:

Tout d'abord, les styles de base:

 un {
  Position: relative;
}

a :: avant {
  Contexte: # FF9800;
  contenu: "";
  Encart: 0;
  Position: absolue;
  transformée: scalex (0);
  Transition: transformer les .5S facilité-ou-out;
  Z-Index: -1;
}

Cela crée un pseudo-élément ( ::before ) avec un fond orange, positionné absolument dans le lien. transform: scaleX(0); Initialement le cache et transition assure une animation fluide.

L'effet de survol est ensuite défini:

 A: Hover :: avant {
  transformée: scalex (1);
  Transform-Origin: à droite;
}

En survol, scaleX(1) élargit le pseudo-élément et, surtout, transform-origin: right; Définit le point d'extension vers la droite. Ceci est la clé du comportement de souris.

La magie réside dans l'interaction de transition et le changement d' transform-origin . La transition anime en douceur le scaleX() de 0 à 1 sur le survol et à nouveau sur la souris-out. Le décalage transform-origin de left (par défaut) à right sur le plan de survol inverse la direction d'animation pour un effet bidirectionnel transparent. Au départ, j'ai eu du mal avec cela, mais la propriété transform-origin s'est avérée être la pièce manquante.

Merci à Adam Argyle pour l'inspiration! Cet effet démontre la puissance des techniques CSS simples lorsqu'elles sont utilisées de manière créative.

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!