HTML CSS와 자바스크립트를 사용한 OTP UI/UX-JS 튜토리얼-php.cn

HTML CSS와 자바스크립트를 사용한 OTP UI/UX

Patricia Arquette

풀어 주다： 2024-12-31 07:41:09

원래의

184명이 탐색했습니다.

OTP UI/UX with html css and javascript

<!DOCTYPE html>
<html lang="ko">
<머리>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>대화형 OTP 입력</title>
  <스타일>
    몸 {
      글꼴 모음: Arial, sans-serif;
      디스플레이: 플렉스;
      내용 정당화: 센터;
      항목 정렬: 중앙;
      높이: 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.3초 용이성;
      색상: #fff;
      배경: #1e1e2e;
    }

    .otp-입력 입력:초점 {
      테두리 색상: #c792ea;
      상자 그림자: 0 0 10px #c792ea;
    }

    .otp-입력 입력.올바른 {
      테두리 색상: #4caf50;
      상자 그림자: 0 0 10px #4caf50;
    }

    .otp-입력 입력.오류 {
      테두리 색상: #ff4c4c;
      상자 그림자: 0 0 10px #ff4c4c;
      애니메이션: 0.3초 흔들림-인-아웃;
    }

    @keyframes 흔들기 {
      0%, 100% { 변환: 번역X(0); }
      25% { 변환: 번역X(-5px); }
      50% { 변환: 번역X(5px); }
      75% { 변환: 번역X(-5px); }
    }

    .메시지 {
      여백 상단: 15px;
      글꼴 크기: 1em;
      색상: #fff;
    }

    .메시지.성공 {
      색상: #4caf50;
    }

    .메시지.오류 {
      색상: #ff4c4c;
    }
  </스타일>
</머리>
<본문>
  <div>

로그인 후 복사

위 내용은 HTML CSS와 자바스크립트를 사용한 OTP UI/UX의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!