如何使用 CSS 创建一个动画搜索表单？

如今，许多网站都在主页上内置了一个动画搜索框。当将鼠标光标移到搜索框内时，搜索框的宽度变大，从而使用户更容易进行搜索。让我们了解如何使用 HTML 和 CSS 创建这种动画搜索表单。

创建搜索表单

使用 <form>元素，并在其中放置输入类型文本。别忘了为用户添加一个适合的占位符，以便用户了解文本框的用途−

<form>
   Search:
   <input type="text" name="search" placeholder="Search Here...">
</form>

给搜索框添加样式

搜索框样式如下。此外，还使用 width 属性上的 transition 属性设置过渡。过渡时间功能设置为 ease-in-out，即开始和结束较慢的过渡−

input[type=text] {
   width: 170px;
   font-size: 16px;
   background-color: white;
   padding: 12px 20px 12px 40px;
   transition: width 0.4s ease-in-out;
}

给搜索表单添加动画

使用 :focus 选择器，在设置焦点时，宽度将变为 100%。:focus 选择器选择拥有焦点的元素−

input[type=text]:focus {
   width: 100%;
}

示例

以下代码使用 CSS 创建了一个动画搜索表单−

<!DOCTYPE html>
<html>
<head>
   <style>
      *{
         box-sizing: border-box;
      }
      input[type=text] {
         width: 170px;
         font-size: 16px;
         background-color: white;
         padding: 12px 20px 12px 40px;
         transition: width 0.4s ease-in-out;
      }
      input[type=text]:focus {
         width: 100%;
      }

   </style>
</head>
<body>
   <h1>Animated search form example</p>
   <form>
      Search:
      <input type="text" name="search" placeholder="Search Here...">
   </form>
</body>
</html>

更新于： 2023-12-14

209 次浏览

开启你的 职业生涯

获得认证以完成课程

开始
广告