使用CSS3创建搜索框效果苹果官网

使用CSS3创建搜索框效果。这个效果的灵感来自于苹果官网。当您的鼠标单击搜索字段时，或者当搜索字段获得焦点时，搜索字段会慢慢变长。这个动画效果是利用CSS3的transition属性来实现的。当然，我们还使用其他 CSS3 属性，例如 border-radius、box-shadow 和 text-shadow 来创建更酷的搜索框效果。

HTML标记

要实现上面的DEMO效果，我们首先要为其创建一个HTML结构。这个结构相当简单，如：

		<h2>黑色背景的Search Box</h2>
		<form action="" id="searchBlack" method="get" class="search bgBlack">
			<input type="text" name="search" size="40" placeholder="Search..." />
		</form>
		<h2>高亮背景的Search Box</h2>
		<form action="" id="searchLight" method="get" class="search bgLight">
			<input type="text" name="search" size="40" placeholder="Search..." />
		</form>
		<h2>Apple.com的Search Box</h2>
		<form action="" id="searchApple" method="get" class="search appleSearch">
			<input type="text" name="search" size="40" placeholder="Search..." />
		</form>

接下来，基于这个HTML模板，我们使用不同的CSS3样式来创建几个类似于苹果官网搜索框的效果。

因为我们几个效果有一些通用的样式，所以我们可以先为这些效果写一个通用的样式：

		.search {
			position: relative;
		}
		
		.search:before {
			content: "";
			border: 1px solid #777;
			border-width: 1px 1px 2px;
			width: 5px;
			height: 0;
			display: inline-block;
			-moz-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
			position: absolute;
			left:16px;
			top:15px;
			z-index:3;
		}
		
		.search:after {
			content: "";
			width: 5px;
			height: 5px;
			border: 2px solid #777;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			position: absolute;
			z-index: 2;
			left: 10px;
			top: 7px;
			display: inline-block;
		}
		
		.search input[type="text"] {
			font: bold 12px Arial,Helvetica,Sans-serif;
			width: 150px;
			padding: 6px 15px 6px 35px;
			border: 0 none;
			color: #777;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
			border-radius: 20px;
			-webkit-transition: all 0.7s ease 0s;
			-moz-transition: all 0.7s ease 0s;
			-o-transition: all 0.7s ease 0s;
			transition: all 0.7s ease 0s;
		}
		
		.search input[type="text"]:focus {
			width: 200px;
		}

初步结果如下：

在上面的效果中，我们有两个地方很特别。重点：

1. 搜索句柄图片：这里的这个放大镜图片完全是利用CSS3属性制作的，主要是结合了CSS3伪类选择器的“:before”和“:after”以及CSS3 Border-radius。由于CSS3变换的属性较多，如果你对用CSS3制作图像的效果感兴趣，可以参考文章《纯CSS制作的图形效果》，不过这个方法在IE下就没用了，看不到这个放大镜的图像;
2. 搜索框加宽：这里我们使用 CSS3 过渡，使搜索框在获得焦点或被单击时具有动画加宽效果，因为我们在使用“:focus”时更改了搜索框的宽度值。

上面的效果看起来不太理想，没有达到我们想要的效果，所以我们在此基础上进行美化一下。我们分别创建三个效果：

1。搜索栏的背景是黑色的

这里我们要做一个黑色背景的搜索栏，所以我们会添加一定的背景颜色和一个小阴影效果，让它更加美观：

		/*===========黑色背景色的Search Box============*/
		.bgBlack input[type="text"] {
			background-color: #444;
			text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
			-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;    
		}

我们来一张看看最终结果。效果：

2。搜索栏的背景是高亮显示的

通过上面的代码我们就很容易创建其他的效果了。你只需要改变“input[type="text"]”元素的背景颜色、字体颜色、阴影效果等就可以创建你需要的效果。当然，如果你力求完美的话，换个放大镜的效果就更好了：

	/*===============高亮背景色的Search Box==============*/
		.bgLight input[type="text"]{
			background-color: #fcfcfc;/*change the background color*/
			color: #bebebe;/*change the font color*/
			text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
			-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
		}
		.bgLight:after,
		.bgLight:before {
			border-color: #bebebe;/*change the icon color*/
		}

3。 Apple.com上的搜索框效果

下面的效果是我们模仿Apple网站上的搜索框效果。

		/*==============Apple.com Search Box效果====================*/
		.appleSearch input[type="text"] {
			background-color: #444;
			color: #d7d7d7;
			text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
			-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;    
		}
		
		.appleSearch input[type="text"]:focus {
			background-color: #fcfcfc;
			color: #6a6f75;
			-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
			-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
			text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

最终效果如下demo所示：

如果你想让你的效果看起来更好，你可以对它进行美化，例如这里我在表单外部添加了一个div，并添加了背景颜色，以使其在视觉上更具对比性。