Nasıl oluşturulur: Animasyonlu arama kutusu

CSS ile animasyonlu arama formu oluşturma nasıl öğrenebilirim.

Giriş alanını tıklayın:

Animasyonlu arama kutusunu nasıl oluştururum

İlk adım - HTML ekleyin:

<input type="text" name="search" placeholder="Ara..">

İkinci adım - CSS ekleyin:

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* 当输入字段获得焦点时，将其宽度更改为 100% */
input[type=text]:focus {
  width: 100%;
}

Kişisel Deneyim

İlgili Sayfalar

Eğitim:HTML Formu

Eğitim:CSS Formu