使用 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中文网其他相关文章！