HTML CSS と JavaScript を使用した OTP UI/UX-jsチュートリアル-php.cn

HTML CSS と JavaScript を使用した OTP UI/UX

Patricia Arquette

リリース： 2024-12-31 07:41:09

オリジナル

184 人が閲覧しました

OTP UI/UX with html css and javascript

<!DOCTYPE html>
<html lang="ja">

  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=device-width、initial-scale=1.0">
  <title>インタラクティブ OTP 入力</title>
  
    体 {
      フォントファミリー: Arial、サンセリフ;
      ディスプレイ: フレックス;
      コンテンツの位置揃え: 中央;
      整列項目: 中央;
      高さ: 100vh;
      背景色: #1e1e2e;
      マージン: 0;
    }

    。容器 {
      テキスト整列: 中央;
      背景: #2a2a40;
      パディング: 30px;
      境界半径: 8px;
      ボックスシャドウ: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    h2 {
      色: #c792ea;
      マージン-ボトム: 20px;
    }

    .otp-input {
      ディスプレイ: フレックス;
      コンテンツの位置揃え: 中央;
      ギャップ: 10px;
    }

    .otp-input 入力 {
      幅: 50ピクセル;
      高さ: 50ピクセル;
      テキスト整列: 中央;
      フォントサイズ: 1.5em;
      ボーダー: 2px ソリッド #444;
      境界半径: 5px;
      概要: なし。
      トランジション: すべて 0.3 秒のイーズ。
      色: #fff;
      背景: #1e1e2e;
    }

    .otp-input 入力:フォーカス {
      境界線の色: #c792ea;
      ボックスシャドウ: 0 0 10px #c792ea;
    }

    .otp-input input.correct {
      境界線の色: #4caf50;
      ボックスシャドウ: 0 0 10px #4caf50;
    }

    .otp-input input.error {
      境界線の色: #ff4c4c;
      ボックスシャドウ: 0 0 10px #ff4c4c;
      アニメーション: 0.3 秒のイーズインアウトをシェイクします。
    }

    @keyframes シェイク {
      0%、100% { 変換:translateX(0); }
      25% { 変換:translateX(-5px); }
      50% { 変換:translateX(5px); }
      75% { 変換:translateX(-5px); }
    }

    。メッセージ {
      マージントップ: 15px;
      フォントサイズ: 1em;
      色: #fff;
    }

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

    .message.error {
      色: #ff4c4c;
    }
  </スタイル>
</head>

  <div>




          </div>

ログイン後にコピー

以上がHTML CSS と JavaScript を使用した OTP UI/UXの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。