چگونه ایجاد می‌شود: جعبه جستجو با انیمیشن

آموزش نحوه استفاده از CSS برای ایجاد فرم جستجو با انیمیشن.

روی فیلد ورودی کلیک کنید:

چگونه یک جعبه جستجو با انیمیشن ایجاد کنیم

مرحله اول - اضافه کردن HTML:

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

مرحله دوم - اضافه کردن 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