如何实现搜索框点击变长动画

本教程将学习如何实现点击搜索框变长的动画效果。

---

如何创建一个动画的搜索表单

我们先来体验下最终的结果：

---

步骤1，增加 HTML：

<input type="text" name="search" placeholder="搜索...">

步骤2，增加 CSS：

.search {
  width: 130px; /* 设定起始宽度 */
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out; /* 设置宽度改变时的动画 */
}

/* 当输入框获得焦点时，将宽度改为100% */
.search:focus {
  width: 100%;
}

完整的代码如下

<style>
  .search {
    width: 130px; /* 设定起始宽度 */
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('//uploads-10001577.cos.ap-shanghai.myqcloud.com/images/search-icon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out; /* 设置宽度改变时的动画 */
  }

  .search:focus {
    width: 100%;
  }
</style>

<p>动画搜索表单:</p>

<form>
  <input class="search" type="text" name="search" placeholder="搜索...">
</form>

尝试一下 »

浏览器兼容性

IE / Edge	Chrome	Firefox	Safari	Opera
10	4 4 -webkit-	4 4 -moz-	5 3.1 -webkit-	11.6 10.5 -o-