纯CSS3实现动画搜索框代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS3实现动画搜索框代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3实现动画搜索框</title>
<script type="text/javascript">
jQuery(document).ready(function(){
								
	  //download script
	  jQuery('.s_download').on("click", function(e) {
			var semail = jQuery("#itzurkarthi_email").val();
			if(semail == '')
			{
				alert('Enter Email');
				return false;
			}
			var str = "sub_email="+semail
			jQuery.ajax({
				type: "POST",
				url: "download.php",
				data: str,
				cache: false,
				success: function(htmld){
						jQuery('#down_update').html(htmld);
				}
			});
	  });
});
</script>
</head>

<style>
	#searchform { float:left; margin-left:20px; margin:9px 0px 0px; padding:0px; }
	#searchform fieldset { padding:0px; border:none; margin:0px; }
	#searchform input[type="text"] { 
		background:#e8e8e8;
		border:none;
		float:left;		
		padding:0px 10px 0px 15px;
		margin:0px;
		width:150px; 
		height:38px;
		line-height:38px;
		transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
		-moz-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 
		-webkit-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 
		-o-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
		color:#585858; 
	}
	#searchform input[type="text"]:hover, #searchform input[type="text"]:focus { width:200px; }
	#searchform input[type="submit"] { background:url(icon-search.png) center 11px no-repeat; cursor:pointer; margin:0px; padding:0px; width:37px; height:38px; line-height:38px; }
	
	input[type="submit"] { padding:4px 17px; color:#ffffcolor:#585858; ff; text-transform:uppercase; border:none; font-size:20px; background:url(gradient.png) bottom repeat-x; cursor:pointer; margin-top:10px; float:left; overflow:visible; transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; }
	
	#searchform input[type="submit"]:hover { background-color:#333232; }
	.style_1 #searchform input[type='submit'] { background-color:#25ade4; }
	.style_2 #searchform input[type='submit'] { background-color:#ff26a0; }
	.style_3 #searchform input[type='submit'] { background-color:#e024e3; }
	.style_4 #searchform input[type='submit'] { background-color:#e32424; }
	.style_5 #searchform input[type='submit'] { background-color:#ff8a00; }
	.style_1, .style_2, .style_3, .style_4, .style_5 { margin:10px; display:block; clear:both }
</style>
<body>

<div style="margin:30px auto; width:300px; height:300px; background:#fff;">
	<h2 style="text-align:center; margin-top:20px;"></h2>
	<div class="style_1">
		<form method="get" id="searchform" action="#">
			<fieldset>
			<input id="s" name="s" type="text" value="Enter Keyword" class="text_input" onblur="if(this.value==''){this.value='Enter Keyword';}" onfocus="if(this.value =='Enter Keyword') {this.value=''; }" />
			<input name="submit" type="submit" value /> </fieldset>
		</form>
	</div>
	<div class="style_2">
		<form method="get" id="searchform" action="#">
			<fieldset>
			<input id="s" name="s" type="text" value="Enter Keyword" class="text_input" onblur="if(this.value==''){this.value='Enter Keyword';}" onfocus="if(this.value =='Enter Keyword') {this.value=''; }" />
			<input name="submit" type="submit" value /> </fieldset>
		</form>
	</div>
	<div class="style_3">
		<form method="get" id="searchform" action="#">
			<fieldset>
			<input id="s" name="s" type="text" value="Enter Keyword" class="text_input" onblur="if(this.value==''){this.value='Enter Keyword';}" onfocus="if(this.value =='Enter Keyword') {this.value=''; }" />
			<input name="submit" type="submit" value /> </fieldset>
		</form>
	</div>
	<div class="style_4">
		<form method="get" id="searchform" action="#">
			<fieldset>
			<input id="s" name="s" type="text" value="Enter Keyword" class="text_input" onblur="if(this.value==''){this.value='Enter Keyword';}" onfocus="if(this.value =='Enter Keyword') {this.value=''; }" />
			<input name="submit" type="submit" value /> </fieldset>
		</form>
	</div>
	<div class="style_5">
		<form method="get" id="searchform" action="#">
			<fieldset>
			<input id="s" name="s" type="text" value="Enter Keyword" class="text_input" onblur="if(this.value==''){this.value='Enter Keyword';}" onfocus="if(this.value =='Enter Keyword') {this.value=''; }" />
			<input name="submit" type="submit" value /> </fieldset>
		</form>
	</div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)