使用CSS3和JavaScript创建一个光滑，动画的全屏搜索表单

设计良好且易于访问的搜索UI可以鼓励用户更频繁地与您网站的搜索功能进行互动，从而提高用户满意度并增加页面浏览量。为此，随着小屏幕设备的主导地位，搜索盒的趋势是使它们变得非常大和大胆。在本教程中，我们将逐步介绍如何创建一个精美，精心设计的全屏搜索表单，该表单可以在所有现代浏览器和设备上运行良好。

 

创建标题和搜索图标界面

首先，我们将使用左侧徽标的经典图案和一些导航链接以及最右侧的搜索图标快速整理标题部分，所有内容都垂直居中。最终点击图标将触发全屏搜索框。而不是使用CSS花车，我们将转向 CSS Flexbox的，而不是实现这一布局简洁，面向未来的方式：

图＃1：内部有3个弹性项目的标题

HTML：

<span style="color:#000000"><头>

	<a id="logo" href="http://www.javascriptkit.com"> <img src =“jklogosmall.gif”/> </a>
	
	<UL>
	<li> <a href="#">第1项</a> </ li>
	<li> <a href="#">第2项</a> </ li>
	<li> <a href="#">第3项</a> </ li>
	<li> <a href="#">第4项</a> </ li>
	</ UL>
	
	<label for =“search-terms”id =“search-label”> <img src =“search.png”/> </ label>

</报头></span>

CSS：

<span style="color:#000000">身体{
	padding-top：70px; //设置顶部填充以容纳固定标头
}

头{
	位置：固定;
	宽度：100％;
	显示：flex;
	顶部：0;
	左：0;
	辩解内容：空间 - 间隔; / *空间柔性物品水平均匀* /
	align-items：center; / *中心垂直弯曲项目* /
	背景：白色;
	填充：10px 5px;
	font：bold 16px'Bitter'，sans-serif; / *使用谷歌字体* /
}

标题，标题*，
表格#search，表格#search * {
	-webkit-box-sizing：border-box;
	-moz-box-sizing：border-box;
	box-sizing：border-box;
}

标题ul {
	list-style：none;
	保证金：0;
	填充&