使用 html css 和 javascript 的 OTP UI/UX

  
  
  <title>互動式 OTP 輸入</title>
  
    身體 {
      字體系列：Arial、無襯線字體；
      顯示：柔性；
      調整內容：居中；
      對齊項目：居中；
      高度：100vh；
      背景顏色：#1e1e2e；
      保證金：0；
    }

    。容器 {
      文字對齊：居中；
      背景：#2a2a40；
      內邊距：30px；
      邊框半徑：8px；
      盒子陰影：0 4px 8px rgba(0, 0, 0, 0.3);
    }

    h2 {
      顏色：#c792ea；
      下邊距：20px；
    }

    .otp-輸入 {
      顯示：柔性；
      調整內容：居中；
      間隙：10px；
    }

    .otp-輸入輸入{
      寬度：50px；
      高度：50px；
      文字對齊：居中；
      字體大小：1.5em；
      邊框：2px 實心#444；
      邊框半徑：5px；
      概要：無；
      過渡：全部 0.3s 緩和；
      顏色：#fff；
      背景：#1e1e2e；
    }

    .otp-input 輸入：焦點 {
      邊框顏色：#c792ea；
      框陰影：0 0 10px #c792ea；
    }

    .otp-輸入輸入.正確的{
      邊框顏色：#4caf50；
      框陰影：0 0 10px #4caf50；
    }

    .otp-輸入 input.error {
      邊框顏色：#ff4c4c；
      框陰影：0 0 10px #ff4c4c；
      動畫：搖動0.3s緩入緩出；
    }

    @關鍵影格搖動{
      0%, 100% { 變換：translateX(0); }
      25% { 變換：translateX(-5px); }
      50% { 變換：translateX(5px); }
      75% { 變換：translateX(-5px); }
    }

    。資訊 {
      上邊距：15px；
      字體大小：1em；
      顏色：#fff；
    }

    .message.success {
      顏色：#4caf50；
    }

    .message.error {
      顏色：#ff4c4c；
    }
  風格>
頭>

  <div>




          </div>

            
        

以上是使用 html css 和 javascript 的 OTP UI/UX的詳細內容。更多資訊請關注PHP中文網其他相關文章！