วิธีที่จะสร้าง: แบบค้นหาที่มีเอนจีนอนิเมชั่น

เรียนรู้วิธีการใช้ CSS สร้างแบบค้นหาที่มีเอนจีนอนิเมชั่น

คลิกช่องบันทึกข้อมูล

วิธีที่จะสร้างแบบค้นหาที่มีเอนจีนอนิเมชั่น

ขั้นที่ 1 - เพิ่ม HTML:

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

ขั้นที่ 2 - เพิ่ม CSS:

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%;
}

ทดลองด้วยตัวเอง

หน้าที่เกี่ยวข้อง

วิธีการ:ฟอร์ม HTML

วิธีการ:ฟอร์ม CSS