OTP UI/UX mit HTML-CSS und Javascript

<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;
    }
  

<k>
  <div>




          </div>

            
        </k></stil></kopf>

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!