Bagaimana untuk membuat: kotak cari animasi

Belajar bagaimana untuk menggunakan CSS untuk membuat formulir cari animasi.

Klik medan input:

Bagaimana untuk membuat kotak cari animasi

Kesalahan pertama - Tambahkan HTML:

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

Kesalahan kedua - Tambahkan CSS:

input[type=text] {
  lebar: 130px;
  -webkit-transition: lebar 0.4s ease-in-out;
  transition: lebar 0.4s ease-in-out;
}
/* Semasa medan input mendapat perhatian, ubah lebar ke 100% */
input[type=text]:focus {
  lebar: 100%;
}

亲自试一试

相关页面

教程：HTML 表单

教程：CSS 表单