如何创建：动画搜索框

学习如何使用 CSS 创建动画搜索表单。

点击输入字段：

如何创建动画搜索框

第一步 - 添加 HTML：

第二步 - 添加 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%;
}

آپ خود سجاوٹ سکتے ہیں

مربوط پیج

تعلیم:ایچ تی ایم ایل فرم

تعلیم:سی ایس ایس فرم