Schütteln bei ungültiger Eingabe: Ansprechende CSS-Animationen für die Web-Verifizierung

Einführung

In diesem Lab werden wir CSS-Animationen und Pseudo-Klassen erkunden, um einen Eingabeverifizierungseffekt zu erstellen. Genauer gesagt werden wir eine Schüttelanimation bei ungültiger Eingabe mithilfe von Keyframes und der :invalid-Pseudo-Klasse erstellen. Dieses Lab wird Ihnen helfen, Ihre CSS-Fähigkeiten zu verbessern und zu lernen, wie dynamische und ansprechende Effekte zu Ihren Webseiten hinzuzufügen.

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/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/DynamicStylingGroup -.-> css/animations("Animations") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35237{{"Schütteln bei ungültiger Eingabe"}} css/colors -.-> lab-35237{{"Schütteln bei ungültiger Eingabe"}} css/box_model -.-> lab-35237{{"Schütteln bei ungültiger Eingabe"}} css/margin_and_padding -.-> lab-35237{{"Schütteln bei ungültiger Eingabe"}} css/animations -.-> lab-35237{{"Schütteln bei ungültiger Eingabe"}} css/mixins -.-> lab-35237{{"Schütteln bei ungültiger Eingabe"}} end

Schütteln bei ungültiger Eingabe

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

Um eine Schüttelanimation bei ungültiger Eingabe zu erstellen, folgen Sie diesen Schritten:

Verwenden Sie das pattern-Attribut, um eine reguläre Ausdruck zu definieren, der die erlaubte Eingabe angibt. Beispielsweise verwenden Sie [A-Za-z]*, um nur Buchstaben zuzulassen.
Definieren Sie eine Schüttelanimation mithilfe von @keyframes. Legen Sie die margin-left-Eigenschaft fest, um das Eingabefeld nach links und rechts zu bewegen.
Verwenden Sie die :invalid-Pseudo-Klasse, um die Schüttelanimation auf das Eingabefeld anzuwenden.
Optionalerweise fügen Sie einer roten Box-Schattierung zum Eingabefeld hinzu, um den Fehler anzuzeigen.

Hier ist ein Beispielcodeausschnitt:

<input type="text" placeholder="Nur Buchstaben" pattern="[A-Za-z]*" />

@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

input:invalid {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.6rem #ff0000;
}

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', 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 "Schütteln bei ungültiger Eingabe" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.