Tutorial zur Buttonschrumpfanimation

Einführung

In diesem Lab werden wir untersuchen, wie man eine Buttonschrumpfanimation mit CSS erstellt. Ziel dieses Labs ist es, Ihnen zu helfen, zu verstehen, wie man die :hover-Pseudoklasse und die transition-Eigenschaft verwendet, um eine glatte und visuell ansprechende Animation zu erstellen, wenn ein Benutzer über einen Button fährt. Am Ende dieses Labs werden Sie gut verstehen, wie man mit CSS einfache aber effektive Animationen erstellt.

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-35178{{"Buttonschrumpfanimation"}} css/colors -.-> lab-35178{{"Buttonschrumpfanimation"}} css/margin_and_padding -.-> lab-35178{{"Buttonschrumpfanimation"}} css/borders -.-> lab-35178{{"Buttonschrumpfanimation"}} css/backgrounds -.-> lab-35178{{"Buttonschrumpfanimation"}} css/pseudo_classes -.-> lab-35178{{"Buttonschrumpfanimation"}} css/transitions -.-> lab-35178{{"Buttonschrumpfanimation"}} css/transformations -.-> lab-35178{{"Buttonschrumpfanimation"}} end

Buttonschrumpfanimation

index.html und style.css wurden bereits in der VM bereitgestellt.

Um eine Schrumpfanimation beim Hovern für ein Element zu erstellen, können Sie eine geeignete transition-Eigenschaft verwenden, um Änderungen zu animieren, und die :hover-Pseudoklasse, um die Animation auszulösen. Beispielsweise, wenn Sie einen Button mit der Klasse button-shrink verkleinern möchten, wenn ein Benutzer darüber fährt, können Sie die folgende CSS hinzufügen:

.button-shrink {
  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-shrink:hover {
  transform: scale(0.8);
}

Dies wird einen Übergangseffekt auf alle Eigenschaften des Buttons anwenden, wenn sich etwas ändert, und wenn der Benutzer darüber fährt, wird der Button auf 80% seiner ursprünglichen Größe verkleinert. Der HTML-Code für den Button lautet wie folgt:

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

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Buttonschrumpfanimation" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.