LabEx
LoginBeitreten

Button-Vergrößerungsanimation

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir lernen, wie man mit CSS einen Button mit einer Vergrößerungsanimation beim Überfahren erstellt. Dieser Effekt kann verwendet werden, um einer Website oder Anwendung Interaktivität und visuelle Attraktivität hinzuzufügen. Indem wir die transform-Eigenschaft und die :hover-Pseudoklasse anwenden, können wir bewirken, dass sich der Button vergrößert, wenn der Benutzer ihn mit der Maus überfährt, und so eine subtile, aber effektive Animation erstellen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Button-Vergrößerungsanimation

index.html und style.css wurden bereits in der virtuellen Maschine (VM) bereitgestellt.

Um eine Vergrößerungsanimation beim Überfahren zu erstellen, können Sie eine geeignete transition verwenden, um Änderungen am Element zu animieren. Verwenden Sie die :hover-Pseudoklasse, um die transform-Eigenschaft auf scale(1.1) zu ändern. Dadurch wird das Element vergrößert, wenn der Benutzer es mit der Maus überfährt.

Hier ist ein Beispiel-Codeausschnitt, den Sie verwenden können:

<button class="button-grow">Submit</button>

.button-grow {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-grow:hover {
  transform: scale(1.1);
}

Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Web-Service auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzusehen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zur Button-Vergrößerungsanimation abgeschlossen. Sie können in LabEx weitere Labs üben, um Ihre Fähigkeiten zu verbessern.