suchen

Heim >Web-Frontend >js-Tutorial >OTP UI/UX mit HTML-CSS und Javascript

OTP UI/UX mit HTML-CSS und Javascript

Patricia Arquette
Patricia ArquetteOriginal
2024-12-31 07:41:09186Durchsuche

OTP UI/UX with html css and javascript

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interaktive OTP-Eingabe</title>
  <Stil>
    Körper {
      Schriftfamilie: Arial, serifenlos;
      Anzeige: Flex;
      rechtfertigen-Inhalt: Mitte;
      align-items: center;
      Höhe: 100 Vh;
      Hintergrundfarbe: #1e1e2e;
      Rand: 0;
    }

    .container {
      Textausrichtung: Mitte;
      Hintergrund: #2a2a40;
      Polsterung: 30px;
      Randradius: 8px;
      Box-Shadow: 0 4px 8px rgba(0, 0, 0, 0,3);
    }

    h2 {
      Farbe: #c792ea;
      Rand unten: 20px;
    }

    .otp-input {
      Anzeige: Flex;
      rechtfertigen-Inhalt: Mitte;
      Lücke: 10px;
    }

    .otp-input-Eingabe {
      Breite: 50px;
      Höhe: 50px;
      Textausrichtung: Mitte;
      Schriftgröße: 1,5em;
      Rand: 2px durchgezogen #444;
      Randradius: 5px;
      Gliederung: keine;
      Übergang: alle 0,3 Sekunden nachlassen;
      Farbe: #fff;
      Hintergrund: #1e1e2e;
    }

    .otp-input input:focus {
      Rahmenfarbe: #c792ea;
      Kastenschatten: 0 0 10px #c792ea;
    }

    .otp-input input.correct {
      Rahmenfarbe: #4caf50;
      Box-Shadow: 0 0 10px #4caf50;
    }

    .otp-input input.error {
      Rahmenfarbe: #ff4c4c;
      Kastenschatten: 0 0 10px #ff4c4c;
      Animation: Schütteln 0,3 s, leichtes Ein- und Aussteigen;
    }

    @keyframes schütteln {
      0 %, 100 % { transform: translatorX(0); }
      25 % { transform: translatorX(-5px); }
      50 % { transform: translatorX(5px); }
      75 % { transform: translatorX(-5px); }
    }

    .Nachricht {
      Rand oben: 15px;
      Schriftgröße: 1em;
      Farbe: #fff;
    }

    .message.success {
      Farbe: #4caf50;
    }

    .message.error {
      Farbe: #ff4c4c;
    }
  </style>
</head>
<Körper>
  <div>

Das obige ist der detaillierte Inhalt vonOTP UI/UX mit HTML-CSS und Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html Error display margin padding border viewport background transform transition animation flex input ux ui
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Advanced TypeScript: Ein tiefer Einblick in die moderne TypeScript-EntwicklungNächster Artikel：Advanced TypeScript: Ein tiefer Einblick in die moderne TypeScript-Entwicklung

In Verbindung stehende Artikel

Mehr sehen