애니메이션 효과가 포함된 jQuery CSS3 양식 입력 상자 확인 코드

HTML,
몸 {
  배경색: #F4F4F4;
  디스플레이: 플렉스;
  너비: 100%;
  높이: 100%;
  항목 정렬: 중앙;
  글꼴 모음: "Work Sans", sans-serif;
  내용 정당화: 센터;
}

.exp-컨테이너 {
  너비: 100%;
  패딩: 30px;
  상자 크기 조정: 테두리 상자;
  최대 너비: 600px;
}

.exp {
  디스플레이: 플렉스;
  플렉스 방향: 열 역방향;
  너비: 100%;
  여백 하단: 30px;
  위치: 상대적;
  flex-wrap: 포장;
}

.exp__라벨 {
  전환: 0.3초;
  여백 하단: 5px;
}

.exp__label:이전 {
  콘텐츠: attr(데이터 아이콘);
  글꼴 두께: 보통;
  글꼴 모음: "Ionicons";
  글꼴 크기: 24px;
  위치: 절대;
  왼쪽: 0;
  변환: 회전Y(90도);
  하단: 0;
  높이: 52px;
  배경: 투명;
  색상: #000;
  변환 원본: 왼쪽;
  디스플레이: 플렉스;
  항목 정렬: 중앙;
  내용 정당화: 센터;
  전환: 색상 .3s 0s 용이성, 변환 .3s 0s 용이성;
  너비: 42px;
}

.exp__입력 {
  테두리: 1px 단색 #ddd;
  패딩: 0 10px;
  너비: 100%;
  높이: 52px;
  전환: 0.3초;
  글꼴 두께: 보통;
  상자 크기 조정: 테두리 상자;
  글꼴 모음: "Work Sans", sans-serif;
  개요: 없음;
}

.exp__input:초점 {
  왼쪽 패딩: 42px;
  테두리 색상: #bbb;
}

.exp__input:포커스 + 라벨:이전 {
  변환: 회전Y(0deg);
}

.exp__input:유효함 {
  왼쪽 패딩: 42px;
  테두리 색상: 녹색;
}

.exp__input:유효 + 라벨 {
  색상: 녹색;
}

독립적인 一款带动画效果的CSS3表单输入框验证代码，当输入框聚焦时流现图标动画，还有验证邮箱地址格式是否正确等功能.