アニメーション効果を備えた jQuery CSS3 フォーム入力ボックス検証コード

html、
ボディ{
背景色: #F4F4F4;
ディスプレイ: フレックス;
幅: 100%;
高さ: 100%;
align-items: 中央に配置;
font-family: "Work Sans"、サンセリフ;
justify-content: 中央;
}

.exp-container {
幅: 100%;
パディング: 30px;
ボックスのサイズ設定: ボーダーボックス;
最大幅: 600ピクセル;
}

.exp {
ディスプレイ: フレックス;
フレックス方向: 列反転;
幅: 100%;
margin-bottom: 30px;
位置: 相対的;
flex-wrap: ラップ;
}

.exp__label {
トランジション: 0.3 秒;
margin-bottom: 5px;
}

.exp__label:前{
コンテンツ: attr(データアイコン);
フォントの太さ: 標準;
フォントファミリー: "Ionicons";
フォントサイズ: 24px;
位置: 絶対;
左: 0;
変換: 回転 Y(90 度);
下: 0;
高さ: 52ピクセル;
背景: 透明;
カラー:#000;
変換原点: 左;
ディスプレイ: フレックス;
align-items: 中央に配置;
justify-content: 中央;
トランジション: カラー .3s 0s イーズ、トランスフォーム .3s 0s イーズ;
幅: 42ピクセル;
}

.exp__input {
境界線: 1px 実線 #ddd;
パディング: 0 10px;
幅: 100%;
高さ: 52ピクセル;
トランジション: 0.3 秒;
フォントの太さ: 標準;
ボックスのサイズ設定: ボーダーボックス;
font-family: "Work Sans"、サンセリフ;
概要: なし
}

.exp__input:focus {
パディング左: 42px;
境界線の色: #bbb;
}

.exp__input:focus + label:before {
変換: 回転Y(0度);
}

.exp__input:有効 {
パディング左: 42px;
境界線の色: 緑;
}

.exp__input:valid + ラベル {
色: 緑
}

非常に単純な一部門アニメーション効果のCSS3表の入力フレームチェックコードで、入力フレーム時に画像アニメーションが表示され、ボックスの形式が正しいかどうかなどをチェックする機能もあります。