搜索按钮的动画特效

一款搜索按钮的动画特效，点击页面的搜索图标按钮，会显示一个颜色填充整个页面的动画，然后出现一个搜索框和右上角的关闭按钮，点击关闭按钮可恢复到初始状态。

分类：表单代码 > 搜索框难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需远程调用font-awesome图标字体库，并引入页面的CSS样式，代码如下：

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好关闭按钮和搜索框的容器，代码如下：

<!-- 关闭按钮 -->
<div class="close">
  <i class="fa fa-close"></i>
</div>
<!-- 搜索框 -->
<div class="search">
  <i class="fa fa-search"></i>
  <input type="text" class="input">
</div>

页面的底部，需引入jQuery库和必要的JS文件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>