Verwenden Sie CSS-Variablen, um coole und erstaunliche Schwebeeffekte zu erzielen

Kürzlich habe ich auf der Grover-Website eine lustige Hover-Animation gefunden und mir selbst etwas Inspiration geholt. Diese Animation besteht darin, dass wenn Sie mit der Maus über den Abonnement-Button fahren, der entsprechende Farbverlauf angezeigt wird. Diese Idee ist einfach, sorgt aber dafür, dass die Schaltfläche hervorsticht, die Leute sie sofort bemerken und die Wahrscheinlichkeit steigt, dass sie darauf klicken.

Wie können wir diesen Effekt erzielen und dafür sorgen, dass unsere Website sich von anderen abhebt? Tatsächlich ist es nicht so schwierig, wie Sie denken!

Standortverfolgung

Als Erstes müssen wir die Position der Maus ermitteln.

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)

}

1. Wählen Sie das Element aus und warten Sie, bis der Benutzer die Maus darüber bewegt;
2. Berechnen Sie die Position relativ zum Element;
3. Speichern Sie die Koordinaten in CSS-Variablen.

Ja, mit nur 9 Codezeilen können Sie Informationen darüber erhalten, wo der Benutzer seinen Mauszeiger platziert hat. Sie können diese Informationen verwenden, um erstaunliche Ergebnisse zu erzielen, aber lassen Sie uns zuerst den CSS-Code fertigstellen.

Animierter Farbverlauf

Wir beginnen damit, die Koordinaten in CSS-Variablen zu speichern, damit wir sie jederzeit verwenden können.

.Taste {
  Position: relativ;
  Aussehen: keines;
  Hintergrund: #f72359;
  Polsterung: 1em 2em;
  Rand: keiner;
  Farbe: weiß;
  Schriftgröße: 1,2em;
  Cursor: Zeiger;
  Gliederung: keine;
  Überlauf: versteckt;
  Rahmenradius: 100px;

  Spanne {
    Position: relativ;
  }

  &::vor {
    --Größe: 0;  

    Inhalt: '';
    Position: absolut;
    links: var(--x);
    oben: var(--y);
    Breite: var(--size);
    Höhe: var(--size);
    Hintergrund: radialer Farbverlauf (Kreis, der der nächsten Seite zugewandt ist, #4405f7, transparent);
    transformieren: übersetzen(-50 %, -50 %);
    Übergang: Breite 0,2 s Leichtigkeit, Höhe 0,2 s Leichtigkeit;
  }

  &:hover::vor {
    --Größe: 400px;
  }
}

1. Umschließen Sie den Text mit einem Bereich, damit er nicht über der Schaltfläche angezeigt wird.
2. Initialisieren Sie Breite und Höhe auf 0 Pixel und ändern Sie sie auf 400 Pixel, wenn der Benutzer mit der Maus über die Schaltfläche fährt. Vergessen Sie nicht, diesen Übergang so einzustellen, dass er sofort wie der Wind erscheint :dash:;
3. Verfolgen Sie die Mausposition anhand von Koordinaten.
4. Wenden Sie unter Verwendung des Kreises auf der nächstgelegenen Seite einen radialen Farbverlauf auf die Hintergrundeigenschaft an. Die nächstgelegene Seite kann die gesamte Oberfläche bedecken.

Zusammenfassen

Oben habe ich Ihnen erklärt, wie Sie mit CSS-Variablen coole und erstaunliche Schwebeeffekte erzielen. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!