jQuery帶動畫效果的CSS3表單輸入框驗證程式碼

html,
身體{
背景顏色：#F4F4F4;
顯示：柔性；
寬度：100%；
高度：100%；
對齊項目：居中；
字體系列：「Work Sans」、sans-serif；
調整內容：居中；
}

.exp-容器 {
寬度：100%；
內邊距：30px；
框大小：邊框框；
最大寬度：600px；
}

.exp {
顯示：柔性；
彈性方向：列反轉；
寬度：100%；
下邊距：30px；
位置：相對；
flex-wrap：包裹；
}

.exp__label {
過渡：0.3s；
下邊距：5px；
}

.exp__label:之前{
內容：attr(資料圖示);
字體粗細：正常；
字體系列：「離子圖示」；
字體大小：24px；
位置：絕對；
左：0；
變換：rotateY(90deg);
底部：0；
高度：52px；
背景：透明；
顏色：#000；
變換原點：左；
顯示：柔性；
對齊項目：居中；
調整內容：居中；
過渡：顏色 .3s 0s 緩動，變換 .3s 0s 緩動；
寬度：42px；
}

.exp__input {
邊框：1px實心#ddd;
內邊距：0 10px；
寬度：100%；
高度：52px；
過渡：0.3s；
字體粗細：正常；
框大小：邊框框；
字體系列：「Work Sans」、sans-serif；
大綱：無；
}

.exp__input:焦點{
左內邊距：42px；
邊框顏色：#bbb;
}

.exp__input:焦點+標籤:之前{
變換：rotateY(0deg);
}

.exp__input:有效{
左內邊距：42px；
邊框顏色：綠色；
}

.exp__input:有效+標籤{
顏色：綠色；
}

非常簡單的前一篇有動畫效果的CSS3表單輸入框驗證碼，當輸入框對焦時出現圖示動畫，還有驗證信箱位址格式是否正確等功能。