今天有收到一封邮件，声称不大懂前端，但是想要扒我meowdata.com在用的搜索框，问我能不能分离代码出来给他，
这个是可以哒！

CSS代码

#search {position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.7);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;-webkit-transform:translate(0px,-100%) scale(0,0);-moz-transform:translate(0px,-100%) scale(0,0);-ms-transform:translate(0px,-100%) scale(0,0);-o-transform:translate(0px,-100%) scale(0,0);transform:translate(0px,-100%) scale(0,0);opacity:0;display:none;}
#search.open {-webkit-transform:translate(0px,0px) scale(1,1);-moz-transform:translate(0px,0px) scale(1,1);-ms-transform:translate(0px,0px) scale(1,1);-o-transform:translate(0px,0px) scale(1,1);transform:translate(0px,0px) scale(1,1);opacity:1;z-index:106;display:block;}
#search input[type="search"] {position:absolute;top:50%;left:0;margin-top:-51px;width:60%;margin-left:20%;color:rgb(255,255,255);background:transparent;border-top:1px solid rgba(255,255,255,.8);border-bottom:2px solid rgba(255,255,255,.5);border-left:0px solid transparent;border-right:0px solid transparent;font-size:40px;font-family:Roboto;font-weight:300;text-align:center;outline:none;padding:10px;}
#search .close {position:fixed;top:15px;right:15px;opacity:1;font-size:27px;color:#fff;}
#search .close:hover {color:#FC2121;cursor:pointer;}

js代码

$('a[href="#search"]').on('click', function(event) {                    
		$('#search').addClass('open');
		$('#search > form > input[type="search"]').focus();
	});            
	$('#search, #search button.close').on('click keyup', function(event) {
		if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
			$(this).removeClass('open');
		}
	});

前端html代码

//搜索按钮
<a href="#search" class="nav-link"><i class="fa fa-search"></i>Search</a>

//搜索框源码
<div id="search"> 
	<span class="close">X</span>
	<form role="search" id="searchform" method="get" action="">
		<input type="search" name="s" value="" placeholder="输入搜索关键词..."/>
	</form>
</div>

这个就是搜索框的代码片段了，可以自己去美化