Adam Argyle's Sick Maus-Out CSS-Schwebeffekte

Ich stöberte Codepen und stieß auf einen fesselnden CSS -Schweberffekt von Adam Argyle. Das App-ähnliche Gefühl der Demo, insbesondere die Hintergrundfarbe, wechselte reibungslos von links nach rechts und dann von rechts nach links, erregte sofort meine Aufmerksamkeit. Ich verbrachte einen guten, um es neu zu erstellen, einen Prozess, der die elegante Verwendung von Übergängen, Transformationen und Offsets hervorhob.

Mein ursprünglicher Ansatz konzentrierte sich auf Hintergrundübergänge, manipulierende background-size und background-position . Ich konnte jedoch nicht die gewünschte bidirektionale Bewegung erreichen.

Als nächstes habe ich CSS -Transformationen untersucht. Während scaleX() das Potenzial bot, veränderte die Anwendung des Link -Elements den Inhalt, ein unerwünschtes Ergebnis. Die Lösung? Ein Pseudo-Element!

Hier ist meine Implementierung:

Erstens die Basisstile:

 A {
  Position: Relativ;
}

a :: vor {
  Hintergrund: #ff9800;
  Inhalt: "";
  Einschub: 0;
  Position: absolut;
  Transformation: scalex (0);
  Übergang: Transformation.
  Z -Index: -1;
}

Dies schafft eine Pseudoelement ( ::before ) mit einem orangefarbenen Hintergrund, der absolut im Link positioniert ist. transform: scaleX(0); Zunächst verbirgt es und transition sorgt für eine reibungslose Animation.

Der Schwebeffekt wird dann definiert:

 A: Hover :: vor {
  Transformation: Scalex (1);
  Transform-Ursprung: Recht;
}

Auf dem Schwebedruck erweitert scaleX(1) die Pseudo-Elemente und entscheidend transform-origin: right; Legt den Expansionspunkt nach rechts fest. Dies ist der Schlüssel zum Mausverhalten.

Die Magie liegt in der Wechselwirkung des transition und der Veränderung des transform-origin . Der Übergang animiert reibungslos den scaleX() von 0 auf 1 auf schweber und wieder zurück bei Mausausläufen. Die Verschiebung des transform-origin von left (Standard) nach right auf Schwebede kehrt die Animationsrichtung für einen nahtlosen, bidirektionalen Effekt um. Zunächst hatte ich damit zu kämpfen, aber das Eigentum von transform-origin Eigentum erwies sich als das fehlende Stück.

Vielen Dank an Adam Argyle für die Inspiration! Dieser Effekt zeigt die Kraft einfacher CSS -Techniken, wenn sie kreativ verwendet werden.

Das obige ist der detaillierte Inhalt vonAdam Argyle's Sick Maus-Out CSS-Schwebeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!