kod pengesahan kotak input borang jQuery CSS3 dengan kesan animasi

html,
badan {
  warna latar belakang: #F4F4F4;
  paparan: flex;
  lebar: 100%;
  ketinggian: 100%;
  align-item: tengah;
  font-family: "Work Sans", sans-serif;
  justify-content: pusat;
}

.exp-container {
  lebar: 100%;
  pelapik: 30px;
  saiz kotak: kotak sempadan;
  lebar maks: 600px;
}

.exp {
  paparan: flex;
  arah lentur: lajur-terbalik;
  lebar: 100%;
  jidar bawah: 30px;
  jawatan: saudara;
  flex-wrap: bungkus;
}

.exp__label {
  peralihan: 0.3s;
  jidar bawah: 5px;
}

.exp__label:sebelum {
  kandungan: attr(ikon data);
  berat fon: biasa;
  font-family: "Ionicons";
  saiz fon: 24px;
  jawatan: mutlak;
  kiri: 0;
  transform: rotateY(90deg);
  bawah: 0;
  ketinggian: 52px;
  latar belakang: telus;
  warna: #000;
  transform-asal: kiri;
  paparan: flex;
  align-item: tengah;
  justify-content: pusat;
  peralihan: warna .3s 0s memudahkan, mengubah .3s 0s memudahkan;
  lebar: 42px;
}

.exp__input {
  sempadan: 1px pepejal #ddd;
  pelapik: 0 10px;
  lebar: 100%;
  ketinggian: 52px;
  peralihan: 0.3s;
  berat fon: biasa;
  saiz kotak: kotak sempadan;
  font-family: "Work Sans", sans-serif;
  garis besar: tiada;
}

.exp__input:fokus {
  padding-kiri: 42px;
  warna sempadan: #bbb;
}

.exp__input:focus + label:sebelum {
  transform: rotateY(0deg);
}

.exp__input:sah {
  padding-kiri: 42px;
  warna sempadan: hijau;
}

.exp__input:valid + label {
  warna: hijau;
}

非常简单的一款带动画效果的CSS3表单输入框验证代码，当输入框聚焦时出现表单输入框验证代码，当输入框聚焦时出现，图片箱地址格式是否正确等功能。