
			<p>首先，请看右侧搜索位置，试试先！！（如果你用的是IE，悲剧了）</p>
<p><img class="alignnone size-full wp-image-3730" title="css3" src="http://www.daqianduan.com/wp-content/uploads/2011/06/css3.jpg" alt="" width="347" height="145" /> <img class="alignnone size-full wp-image-3730" title="css32" src="http://www.daqianduan.com/wp-content/uploads/2011/06/css32.jpg" alt="" /></p>
<p>小小的动画，是css3实现的，很有爱，有木有！！</p>
<form class="demo_search" action="/index.php" method="get"><input class="demo_sinput" type="text" name="s" /> <input class="demo_sbtn" type="submit" value="搜索" /></form>
<p><strong>代码如下：</strong></p>
<pre>.searchdemo {
display:inline-block;
position:relative;
height:27px;
margin:60px;
}
.searchdemo:hover {
-webkit-box-shadow:0 0 3px #999;
-moz-box-shadow:0 0 3px #999
}
.searchdemo .sinput {
float:left;
width:130px;
height:19px;
line-height:19px;
padding:3px 5px;
border:#A7A7A7 1px solid;
background:white;
color:#888;
font-size:12px;
-webkit-transition:.3s;
-moz-transition:.3s;
outline: none;
}
.searchdemo .sinput:focus {
width:200px;
}
.searchdemo .sbtn {
cursor:pointer;
height:27px;
font-size:12px;
float:left;
width:50px;
margin-left:-1px;
background:#eee;
display:inline-block;
padding:0 12px;
vertical-align:middle;
border:#A7A7A7 1px solid;
color:#666;
}
.searchdemo .sbtn:hover {
background:#ddd;
}</pre>
<pre>&lt;form action="/index.php" method="get"&gt;&lt;input type="text" name="s" /&gt; &lt;input type="submit" value="搜索" /&gt;&lt;/form&gt;</pre>
<p>效果看本站搜索部分！！</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=3729" target="_blank" class="btn-demo">点此查看实例展示</a></p>
<p>转载请注明：<a href="http://www.daqianduan.com">大前端</a> &raquo; <a href="http://www.daqianduan.com/css3-search/">简单CSS3 让搜索更有爱</a></p>		