Erstellen Sie eine fesselnde Button-Vergrößerungsanimation mit CSS

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/DynamicStylingGroup -.-> css/transitions("Transitions") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35177{{"Button-Vergrößerungsanimation"}} css/colors -.-> lab-35177{{"Button-Vergrößerungsanimation"}} css/margin_and_padding -.-> lab-35177{{"Button-Vergrößerungsanimation"}} css/borders -.-> lab-35177{{"Button-Vergrößerungsanimation"}} css/backgrounds -.-> lab-35177{{"Button-Vergrößerungsanimation"}} css/pseudo_classes -.-> lab-35177{{"Button-Vergrößerungsanimation"}} css/transitions -.-> lab-35177{{"Button-Vergrößerungsanimation"}} css/transformations -.-> lab-35177{{"Button-Vergrößerungsanimation"}} end

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.