OTP UI/UX avec HTML CSS et Javascript-js tutoriel-php.cn

OTP UI/UX avec HTML CSS et Javascript

Patricia Arquette

Libérer： 2024-12-31 07:41:09

original

230 Les gens l'ont consulté

OTP UI/UX with html css and javascript

<!DOCTYPE html>
<html lang="fr">
<tête>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <titre>Entrée OTP interactive</titre>
  <style>
    corps {
      famille de polices : Arial, sans empattement ;
      affichage : flexible ;
      justifier-contenu : centre ;
      align-items : centre ;
      hauteur : 100vh ;
      couleur d'arrière-plan : #1e1e2e ;
      marge : 0 ;
    }

    .conteneur {
      alignement du texte : centre ;
      arrière-plan : #2a2a40 ;
      remplissage : 30 px ;
      rayon de bordure : 8 px ;
      box-shadow : 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    h2 {
      couleur : #c792ea ;
      marge inférieure : 20 px ;
    }

    .otp-entrée {
      affichage : flexible ;
      justifier-contenu : centre ;
      écart : 10 px ;
    }

    .otp-input entrée {
      largeur : 50 px ;
      hauteur : 50px ;
      alignement du texte : centre ;
      taille de police : 1,5em ;
      bordure : 2px solide #444 ;
      rayon de bordure : 5 px ;
      contour : aucun ;
      transition : toutes les 0,3 s sont faciles ;
      couleur : #fff ;
      arrière-plan : #1e1e2e ;
    }

    .otp-input input:focus {
      couleur de la bordure : #c792ea ;
      ombre de la boîte : 0 0 10px #c792ea ;
    }

    .otp-input input.correct {
      couleur de la bordure : #4caf50 ;
      ombre de la boîte : 0 0 10px #4caf50 ;
    }

    .otp-input entrée.erreur {
      couleur de la bordure : #ff4c4c ;
      ombre de la boîte : 0 0 10px #ff4c4c ;
      animation : secouez 0,3 s pour faciliter l'entrée et la sortie ;
    }

    @keyframes secoue {
      0 %, 100 % { transform : translateX(0); }
      25% { transformation : traduireX(-5px); }
      50 % { transformation : traduireX(5px); }
      75 % { transformation : traduireX(-5px); }
    }

    .message {
      marge supérieure : 15 px ;
      taille de police : 1em ;
      couleur : #fff ;
    }

    .message.succès {
      couleur : #4caf50 ;
    }

    .message.erreur {
      couleur : #ff4c4c ;
    }
  </style>
&Lt;/tête>
<corps>
  <div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!