cari

Rumah >hujung hadapan web >tutorial js >OTP UI/UX dengan html css dan javascript

OTP UI/UX dengan html css dan javascript

Patricia Arquette
Patricia Arquetteasal
2024-12-31 07:41:09177semak imbas

OTP UI/UX with html css and javascript

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Input OTP Interaktif</title>
  <gaya>
    badan {
      font-family: Arial, sans-serif;
      paparan: flex;
      justify-content: pusat;
      align-item: tengah;
      ketinggian: 100vh;
      warna latar belakang: #1e1e2e;
      margin: 0;
    }

    .bekas {
      text-align: tengah;
      latar belakang: #2a2a40;
      padding: 30px;
      jejari sempadan: 8px;
      bayang-kotak: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    h2 {
      warna: #c792ea;
      jidar bawah: 20px;
    }

    .otp-input {
      paparan: flex;
      justify-content: pusat;
      jurang: 10px;
    }

    .otp-input input {
      lebar: 50px;
      ketinggian: 50px;
      text-align: tengah;
      saiz fon: 1.5em;
      sempadan: 2px pepejal #444;
      jejari sempadan: 5px;
      garis besar: tiada;
      peralihan: semua 0.3s mudah;
      warna: #fff;
      latar belakang: #1e1e2e;
    }

    .otp-input input:focus {
      warna sempadan: #c792ea;
      bayang kotak: 0 0 10px #c792ea;
    }

    .otp-input input.correct {
      warna sempadan: #4caf50;
      bayang kotak: 0 0 10px #4caf50;
    }

    .otp-input input.error {
      warna sempadan: #ff4c4c;
      bayang-kotak: 0 0 10px #ff4c4c;
      animasi: goncang 0.3s mudah masuk;
    }

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

    .message {
      jidar atas: 15px;
      saiz fon: 1em;
      warna: #fff;
    }

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

    .message.error {
      warna: #ff4c4c;
    }
  </style>
</head>
<badan>
  <div>

Atas ialah kandungan terperinci OTP UI/UX dengan html css dan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Error display margin padding border viewport background transform transition animation flex input ux ui
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：TypeScript Lanjutan: Penyelaman Mendalam ke dalam Pembangunan TypeScript ModenArtikel seterusnya：TypeScript Lanjutan: Penyelaman Mendalam ke dalam Pembangunan TypeScript Moden

Artikel berkaitan

Lihat lagi