애니메이션 효과가 포함된 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表单输入框验证代码，当输入框聚焦时流现图标动画，还有验证邮箱地址格式是否正确等功能.