jQuery+CSS3下拉高级搜索框特效

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

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

以下是 jQuery+CSS3下拉高级搜索框特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery下拉高级搜索框特效</title>
<!--<link href='https://fonts.useso.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<header class="cd-main-header animate-search">
	<div class="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>

	<nav class="cd-main-nav-wrapper">
		<a href="#search" class="cd-search-trigger cd-text-replace">Search</a>
		
		<ul class="cd-main-nav">
			<li><a href="#0">Products</a></li>
			<li><a href="#0">Store</a></li>
			<li><a href="#0">Blog</a></li>
			<li><a href="#0">Contact</a></li>
		</ul> <!-- .cd-main-nav -->
	</nav> <!-- .cd-main-nav-wrapper -->

	<a href="#0" class="cd-nav-trigger cd-text-replace">Menu<span></span></a>
</header>

<main class="cd-main-content">
	<!-- your content here -->
</main>

<div id="search" class="cd-main-search">
	<form>
		<input type="search" placeholder="Search...">

		<div class="cd-select">
			<span>in</span>
			<select name="select-category">
				<option value="all-categories">all Categories</option>
				<option value="category1">Category 1</option>
				<option value="category2">Category 2</option>
				<option value="category3">Category 3</option>
			</select>
			<span class="selected-value">all Categories</span>
		</div>
	</form>

	<div class="cd-search-suggestions">
		<div class="news">
			<h3>News</h3>
			<ul>
				<li>
					<a class="image-wrapper" href="#0"><img src="img/placeholder.png" alt="News image"></a>
					<h4><a class="cd-nowrap" href="#0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></h4>
					<time datetime="2016-01-12">Feb 03, 2016</time>
				</li>

				<li>
					<a class="image-wrapper" href="#0"><img src="img/placeholder.png" alt="News image"></a>
					<h4><a class="cd-nowrap" href="#0">Incidunt voluptatem adipisci voluptates fugit beatae culpa eum, distinctio, assumenda est ad</a></h4>
					<time datetime="2016-01-12">Jan 28, 2016</time>
				</li>

				<li>
					<a class="image-wrapper" href="#0"><img src="img/placeholder.png" alt="News image"></a>
					<h4><a class="cd-nowrap" href="#0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, esse.</a></h4>
					<time datetime="2016-01-12">Jan 12, 2016</time>
				</li>
			</ul>
		</div> <!-- .news -->

		<div class="quick-links">
			<h3>Quick Links</h3>
			<ul>
				<li><a href="#0">Find a store</a></li>
				<li><a href="#0">Accessories</a></li>
				<li><a href="#0">Warranty info</a></li>
				<li><a href="#0">Support</a></li>
				<li><a href="#0">Contact us</a></li>
			</ul>
		</div> <!-- .quick-links -->
	</div> <!-- .cd-search-suggestions -->

	<a href="#0" class="close cd-text-replace">Close Form</a>
</div> <!-- .cd-main-search -->
<div class="cd-cover-layer"></div> <!-- cover main content when search form is open -->
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

JS代码(main.js):

jQuery(document).ready(function($){
	var resizing = false,navigationWrapper = $('.cd-main-nav-wrapper'),navigation = navigationWrapper.children('.cd-main-nav'),searchForm = $('.cd-main-search'),pageContent = $('.cd-main-content'),searchTrigger = $('.cd-search-trigger'),coverLayer = $('.cd-cover-layer'),navigationTrigger = $('.cd-nav-trigger'),mainHeader = $('.cd-main-header');
	function checkWindowWidth(){
	var mq = window.getComputedStyle(mainHeader.get(0),'::before').getPropertyValue('content').replace(/"/g,'').replace(/'/g,"");
	return mq;
}
function checkResize(){
	if( !resizing ){
	resizing = true;
	(!window.requestAnimationFrame) ? setTimeout(moveNavigation,300):window.requestAnimationFrame(moveNavigation);
}
}
function moveNavigation(){
	var screenSize = checkWindowWidth();
	if ( screenSize == 'desktop' && (navigationTrigger.siblings('.cd-main-search').length == 0) ){
	//desktop screen - insert navigation and search form inside <header>searchForm.detach().insertBefore(navigationTrigger);
	navigationWrapper.detach().insertBefore(searchForm).find('.cd-serch-wrapper').remove();
}
else if( screenSize == 'mobile' && !(mainHeader.children('.cd-main-nav-wrapper').length == 0)){
	//mobile screen - move navigation and search form after .cd-main-content elementnavigationWrapper.detach().insertAfter('.cd-main-content');
	var newListItem = $('<li class="cd-serch-wrapper"></li>');
	searchForm.detach().appendTo(newListItem);
	newListItem.appendTo(navigation);
}
resizing = false;
}
function closeSearchForm(){
	searchTrigger.removeClass('search-form-visible');
	searchForm.removeClass('is-visible');
	coverLayer.removeClass('search-form-visible');
}
//add the .no-pointerevents class to the <html> if browser doesn't support pointer-events property( !Modernizr.testProp('pointerEvents') ) && $('html').addClass('no-pointerevents');
	//move navigation and search form elements according to window widthmoveNavigation();
	$(window).on('resize',checkResize);
	//mobile version - open/close navigationnavigationTrigger.on('click',function(event){
	event.preventDefault();
	mainHeader.add(navigation).add(pageContent).toggleClass('nav-is-visible');
}
);
	searchTrigger.on('click',function(event){
	event.preventDefault();
	if( searchTrigger.hasClass('search-form-visible') ){
	searchForm.find('form').submit();
}
else{
	searchTrigger.addClass('search-form-visible');
	coverLayer.addClass('search-form-visible');
	searchForm.addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
	searchForm.find('input[type="search"]').focus().end().off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
}
);
}
}
);
	//close search formsearchForm.on('click','.close',function(){
	closeSearchForm();
}
);
	coverLayer.on('click',function(){
	closeSearchForm();
}
);
	$(document).keyup(function(event){
	if( event.which=='27' ) closeSearchForm();
}
);
	//upadate span.selected-value text when user selects a new optionsearchForm.on('change','select',function(){
	searchForm.find('.selected-value').text($(this).children('option:selected').text());
}
);
}
);

CSS代码(htmleaf-demo.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{color:#D5D6E2;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.htmleaf-header h1 span{font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#494A5F;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}

CSS代码(style.css):

/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{box-sizing:border-box;}
html{font-size:62.5%;}
body{font-size:1.6rem;font-family:"Open Sans",sans-serif;color:#333545;background-color:#ffffff;}
a{color:#dd85ac;text-decoration:none;}
img{max-width:100%;}
input{font-family:"Open Sans",sans-serif;font-size:1.6rem;}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none;}
select,input[type="search"]{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;border:none;}
input[type="search"]{border-radius:0;margin-top:0;}
select{background-color:transparent;cursor:pointer;}
.cd-select::after{/* switcher arrow for select element */
 content:'';position:absolute;z-index:1;right:4px;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);width:16px;height:16px;background:url(../img/cd-icons.svg) no-repeat 0 0;pointer-events:none;}
/* --------------------------------Patterns - reusable parts of our design-------------------------------- */
.cd-text-replace{/* replace text with image */
 color:transparent;text-indent:100%;overflow:hidden;white-space:nowrap;}
/* --------------------------------Header-------------------------------- */
.cd-main-header{position:relative;z-index:4;height:50px;background-color:#333545;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;}
.cd-main-header.nav-is-visible{-webkit-transform:translateX(-260px);-moz-transform:translateX(-260px);-ms-transform:translateX(-260px);-o-transform:translateX(-260px);transform:translateX(-260px);}
.cd-main-header::before{/* never visible - this is used in jQuery to check the current MQ */
 display:none;content:'mobile';}
@media only screen and (min-width:1024px){.cd-main-header{height:80px;}
.cd-main-header.nav-is-visible{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
.cd-main-header::before{content:'desktop';}
}
.cd-main-nav-wrapper{padding:0 5%;}
.cd-main-nav-wrapper::after{clear:both;content:"";display:table;}
.cd-logo{display:inline-block;height:100%;margin-left:15px;/* remove jump on iOS devices - when we fire the navigation */
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.cd-logo img{display:block;margin-top:14px;}
@media only screen and (min-width:1024px){.cd-logo{position:absolute;z-index:3;margin-left:5%;}
.cd-logo img{margin-top:29px;}
}
.cd-nav-trigger{/* nav trigger - visible on small devices only */
 display:block;position:absolute;right:0;top:0;height:100%;width:50px;}
.cd-nav-trigger span{/* nav icon created in CSS */
 position:absolute;height:2px;width:20px;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);background-color:#ffffff;-webkit-transition:background-color 0.3s;-moz-transition:background-color 0.3s;transition:background-color 0.3s;}
.cd-nav-trigger span::before,.cd-nav-trigger span::after{/* upper and lower lines of the menu icon */
 content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff;/* Force Hardware Acceleration */
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;}
.cd-nav-trigger span::before{-webkit-transform:translateY(-6px);-moz-transform:translateY(-6px);-ms-transform:translateY(-6px);-o-transform:translateY(-6px);transform:translateY(-6px);}
.cd-nav-trigger span::after{-webkit-transform:translateY(6px);-moz-transform:translateY(6px);-ms-transform:translateY(6px);-o-transform:translateY(6px);transform:translateY(6px);}
.nav-is-visible .cd-nav-trigger span{background-color:rgba(255,255,255,0);}
.nav-is-visible .cd-nav-trigger span::before{-webkit-transform:translateY(0) rotate(-45deg);-moz-transform:translateY(0) rotate(-45deg);-ms-transform:translateY(0) rotate(-45deg);-o-transform:translateY(0) rotate(-45deg);transform:translateY(0) rotate(-45deg);}
.nav-is-visible .cd-nav-trigger span::after{-webkit-transform:translateY(0) rotate(45deg);-moz-transform:translateY(0) rotate(45deg);-ms-transform:translateY(0) rotate(45deg);-o-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg);}
@media only screen and (min-width:1024px){.cd-nav-trigger{display:none;}
}
.cd-main-nav{position:fixed;z-index:1;top:0;right:0;width:260px;height:100vh;overflow:auto;background:#1f2029;visibility:hidden;-webkit-transition:visibility 0s 0.3s;-moz-transition:visibility 0s 0.3s;transition:visibility 0s 0.3s;}
.cd-main-nav a,.cd-main-nav input[type="search"]{display:block;font-size:1.6rem;padding:0 2em 0 1em;line-height:50px;color:#ffffff;border-bottom:1px solid #333545;-webkit-transition:-webkit-transform 0.3s,opacity 0.3s;-moz-transition:-moz-transform 0.3s,opacity 0.3s;transition:transform 0.3s,opacity 0.3s;}
.cd-main-nav input[type="search"]{background-color:#292a37;-webkit-transition:background-color 0.3s;-moz-transition:background-color 0.3s;transition:background-color 0.3s;}
.cd-main-nav input[type="search"]:focus{background-color:#333545;}
.cd-main-nav.nav-is-visible{-webkit-transition:visibility 0s;-moz-transition:visibility 0s;transition:visibility 0s;visibility:visible;-webkit-overflow-scrolling:touch;}
@media only screen and (min-width:1024px){.cd-main-nav{/* reset style */
 position:static;visibility:visible;width:auto;height:80px;background:transparent;overflow:visible;float:right;}
.cd-main-nav li{display:inline-block;float:left;height:100%;padding:1.375em .4em;}
.cd-main-nav a{padding:.625em .8em;line-height:1;border-bottom:none;}
.cd-main-nav a:hover{opacity:.6;}
}
/* --------------------------------Search Form-------------------------------- */
.cd-main-search .cd-select{/* hide select element on small devices */
 display:none;}
.cd-main-search .close{/* 'X' icon to close search form - hidden on small devices */
 display:none;}
.cd-main-search input[type="search"]{width:100%;color:#ffffff;}
.cd-main-search input[type="search"]:focus{outline:none;}
.cd-main-search input[type="search"]::-webkit-input-placeholder{color:#5c5d6a;}
.cd-main-search input[type="search"]::-moz-placeholder{color:#5c5d6a;}
.cd-main-search input[type="search"]:-moz-placeholder{color:#5c5d6a;}
.cd-main-search input[type="search"]:-ms-input-placeholder{color:#5c5d6a;}
@media only screen and (min-width:1024px){.cd-main-search{position:absolute;z-index:2;top:0;left:0;height:100%;width:100%;background:#14151c;opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s,visibility 0.3s;-moz-transition:opacity 0.3s,visibility 0.3s;transition:opacity 0.3s,visibility 0.3s;}
.cd-main-search form{position:relative;height:100%;/* 170px (margin left) is the sum of the logo width (124px) and additional 46px margin (to separate the form form the logo) */
 /* 116px (margin right) takes into account the space occupied by the a.cd-search-trigger and a.close */
 margin:0 calc(5% + 116px) 0 calc(5% + 170px);}
.cd-main-search input[type="search"]{font-size:2.4rem;height:100%;background-color:transparent;/* don't overlap <select> element */
 padding-right:170px;}
.cd-main-search .cd-select{display:inline-block;position:absolute;right:0;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);color:#5c5d6a;font-size:1.4rem;overflow:hidden;}
.cd-main-search span{display:inline-block;}
.cd-main-search option{/* style <option> elements on Firefox */
 color:#333545;background-color:#ffffff;}
.cd-main-search select{/* the <select> element is not visible (if the list of options is not open) - it is covered by the .selected-value element */
 position:absolute;right:0;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);opacity:0;color:transparent;}
.cd-main-search select:focus{outline:none;}
.cd-main-search select:focus + span.selected-value{background-color:#3d3f4e;}
.cd-main-search .selected-value{/* this <span> element covers the <select> element - its content is changed (using JavaScript) and set equal to the selected <option> value */
 /* its width automatically changes according to the text of the selected <option> (not possible with a <select> element) */
 color:#ffffff;/* clicking on this element will open the <select> drop-down list */
 pointer-events:none;-webkit-transition:background-color 0.3s;-moz-transition:background-color 0.3s;transition:background-color 0.3s;}
.cd-main-search select,.cd-main-search .selected-value{padding:0.5em 1.7em 0.5em .3em;font-size:1.4rem;border-radius:3px;}
.no-pointerevents .cd-main-search .selected-value{/* if the browser doesn't support the pointer-events property,hide the .selected-value element */
 display:none;}
.no-pointerevents .cd-main-search select{/* if the browser doesn't support the pointer-events property,show the <select> element */
 position:relative;color:#ffffff;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
.no-pointerevents .cd-main-search select:focus{background-color:#3d3f4e;}
.cd-main-search .close{/* 'X' icon - used to close the search form */
 display:inline-block;position:absolute;right:5%;top:50%;height:40px;width:40px;-webkit-transform:translateY(-50%) scale(0);-moz-transform:translateY(-50%) scale(0);-ms-transform:translateY(-50%) scale(0);-o-transform:translateY(-50%) scale(0);transform:translateY(-50%) scale(0);-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;}
.cd-main-search .close::before,.cd-main-search .close::after{/* used to create the 'X' icon in css */
 content:'';position:absolute;height:20px;width:2px;background-color:#ffffff;left:50%;top:50%;}
.cd-main-search .close::before{-webkit-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-moz-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-o-transform:translateX(-50%) translateY(-50%) rotate(-45deg);transform:translateX(-50%) translateY(-50%) rotate(-45deg);}
.cd-main-search .close::after{-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);-moz-transform:translateX(-50%) translateY(-50%) rotate(45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);-o-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);}
.cd-main-search.is-visible{/* search form open */
 opacity:1;visibility:visible;}
.cd-main-search.is-visible .close{-webkit-transform:translateY(-50%) scale(1);-moz-transform:translateY(-50%) scale(1);-ms-transform:translateY(-50%) scale(1);-o-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);}
.animate-search .cd-main-search.is-visible{/* trigger search form animation if <header> has the .animate-search class */
 -webkit-animation:cd-slide-in 0.3s;-moz-animation:cd-slide-in 0.3s;animation:cd-slide-in 0.3s;}
}
@-webkit-keyframes cd-slide-in{0%{-webkit-transform:translateY(-100%);}
100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes cd-slide-in{0%{-moz-transform:translateY(-100%);}
100%{-moz-transform:translateY(0);}
}
@keyframes cd-slide-in{0%{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%);}
100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
}
.cd-search-suggestions{/* drowpdown with search suggestions - hidden on small devices */
 display:none;}
@media only screen and (min-width:1024px){.cd-search-suggestions{display:block;position:absolute;top:80px;left:0;/* same width of <form> element */
 width:calc( 90% - 286px);padding:2em;/* same margin of <form> element */
 margin:0 calc(5% + 116px) 0 calc(5% + 170px);background-color:#ffffff;box-shadow:0 4px 40px rgba(0,0,0,0.39);}
.cd-search-suggestions::after{clear:both;content:"";display:table;}
.cd-search-suggestions .quick-links,.cd-search-suggestions .news{display:inline-block;}
.cd-search-suggestions .quick-links{float:right;width:140px;text-align:right;}
.cd-search-suggestions .news{float:left;width:calc(100% - 140px);}
.cd-search-suggestions h3{margin-bottom:1.5em;text-transform:uppercase;color:#7a7c86;font-size:1.2rem;font-weight:bold;letter-spacing:.1em;}
.cd-search-suggestions h4{font-weight:bold;font-size:1.4rem;}
.cd-search-suggestions h4 a{/* prevent the text from wrapping */
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:.2em 0;}
.cd-search-suggestions a{display:inline-block;color:#333545;}
.no-touch .cd-search-suggestions a:hover{opacity:.8;}
.cd-search-suggestions time{font-size:1.2rem;color:#70727d;}
.cd-search-suggestions .news li{position:relative;padding:0.625em 0.75em 0.75em 4em;margin-bottom:0.25em;}
.cd-search-suggestions .news li:last-of-type{margin-bottom:0;}
.cd-search-suggestions .image-wrapper{position:absolute;left:0;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);width:50px;height:50px;}
.cd-search-suggestions .image-wrapper img{display:block;}
.cd-search-suggestions .quick-links a{padding:.5em 0;font-size:1.4rem;line-height:1.2;}
.animate-search .is-visible .cd-search-suggestions{/* trigger the dropdown animation if <header> has the .animate-search class */
 -webkit-transform-origin:center top;-moz-transform-origin:center top;-ms-transform-origin:center top;-o-transform-origin:center top;transform-origin:center top;/* Force Hardware Acceleration */
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-animation:cd-3d-rotation 0.5s 0.3s;-moz-animation:cd-3d-rotation 0.5s 0.3s;animation:cd-3d-rotation 0.5s 0.3s;-webkit-animation-fill-mode:backwards;-moz-animation-fill-mode:backwards;animation-fill-mode:backwards;}
}
@-webkit-keyframes cd-3d-rotation{0%{-webkit-transform:perspective(1000px) rotateX(-90deg);}
100%{-webkit-transform:perspective(1000px) translateY(0);}
}
@-moz-keyframes cd-3d-rotation{0%{-moz-transform:perspective(1000px) rotateX(-90deg);}
100%{-moz-transform:perspective(1000px) translateY(0);}
}
@keyframes cd-3d-rotation{0%{-webkit-transform:perspective(1000px) rotateX(-90deg);-moz-transform:perspective(1000px) rotateX(-90deg);-ms-transform:perspective(1000px) rotateX(-90deg);-o-transform:perspective(1000px) rotateX(-90deg);transform:perspective(1000px) rotateX(-90deg);}
100%{-webkit-transform:perspective(1000px) translateY(0);-moz-transform:perspective(1000px) translateY(0);-ms-transform:perspective(1000px) translateY(0);-o-transform:perspective(1000px) translateY(0);transform:perspective(1000px) translateY(0);}
}
.cd-search-trigger{/* trigger serach form visibility - hidden on small devices */
 display:none;}
@media only screen and (min-width:1024px){.cd-search-trigger{display:block;position:relative;z-index:3;height:40px;width:40px;margin:1.25em .5em;float:right;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;}
.cd-search-trigger::after,.cd-search-trigger:before{/* used to create the icon lens and the background circle */
 content:'';position:absolute;}
.cd-search-trigger::after{/* icon lens */
 left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);height:16px;width:16px;background:url(../img/cd-icons.svg) no-repeat -16px 0;}
.cd-search-trigger::before{/* background circle */
 left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) scale(0);-moz-transform:translateX(-50%) translateY(-50%) scale(0);-ms-transform:translateX(-50%) translateY(-50%) scale(0);-o-transform:translateX(-50%) translateY(-50%) scale(0);transform:translateX(-50%) translateY(-50%) scale(0);height:100%;width:100%;background-color:#dd85ac;border-radius:50%;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;}
.no-touch .cd-search-trigger:hover::before{background-color:#df8bb0;}
.cd-search-trigger.search-form-visible{-webkit-transform:translateX(-46px);-moz-transform:translateX(-46px);-ms-transform:translateX(-46px);-o-transform:translateX(-46px);transform:translateX(-46px);}
.cd-search-trigger.search-form-visible::before{-webkit-transform:translateX(-50%) translateY(-50%) scale(1);-moz-transform:translateX(-50%) translateY(-50%) scale(1);-ms-transform:translateX(-50%) translateY(-50%) scale(1);-o-transform:translateX(-50%) translateY(-50%) scale(1);transform:translateX(-50%) translateY(-50%) scale(1);}
}
/* --------------------------------Content cover layer-------------------------------- */
.cd-cover-layer{/* cover main content when search form is open - hidden on smal devices */
 display:none;}
@media only screen and (min-width:1024px){.cd-cover-layer{display:block;position:fixed;z-index:3;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s,visibility 0.3s;-moz-transition:opacity 0.3s,visibility 0.3s;transition:opacity 0.3s,visibility 0.3s;}
.cd-cover-layer.search-form-visible{opacity:1;visibility:visible;}
}
/* --------------------------------Page main content-------------------------------- */
.cd-main-content{display:table;width:100%;height:calc(100vh - 50px);position:relative;z-index:2;background-color:#40508e;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;}
.cd-main-content .content-center{display:table-cell;vertical-align:middle;text-align:center;}
.cd-main-content .content-center h1{color:#ffffff;font-size:2.4rem;margin-bottom:.6em;}
.cd-main-content .cd-download-btn{background:#dd85ac;color:#ffffff;display:inline-block;padding:1.4em 1.6em;border-radius:50em;font-size:1.4rem;font-weight:bold;box-shadow:0 2px 18px rgba(0,0,0,0.1);}
.cd-main-content.nav-is-visible{-webkit-transform:translateX(-260px);-moz-transform:translateX(-260px);-ms-transform:translateX(-260px);-o-transform:translateX(-260px);transform:translateX(-260px);}
@media only screen and (min-width:1024px){.cd-main-content{height:calc(100vh - 80px);}
.cd-main-content .content-center h1{font-size:3.6rem;}
.cd-main-content.nav-is-visible{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
}
/* --------------------------------JavaScript Disabled-------------------------------- */
.no-js .cd-main-header{height:auto;}
.no-js .cd-main-header::after{clear:both;content:"";display:table;}
.no-js .cd-nav-trigger{display:none;}
.no-js .cd-main-nav-wrapper{display:inline-block;float:right;}
.no-js .cd-main-nav{position:static;width:auto;height:auto;visibility:visible;background-color:transparent;float:right;}
.no-js .cd-main-nav::after{clear:both;content:"";display:table;}
.no-js .cd-main-nav li{display:inline-block;float:left;}
.no-js .cd-main-nav a{border-bottom:0;}
.no-js .cd-search-trigger{display:inline-block;text-indent:0;color:#ffffff;float:right;line-height:50px;}
@media only screen and (min-width:1024px){.no-js .cd-search-trigger{text-indent:100%;color:transparent;line-height:normal;}
}
.no-js .cd-main-search{position:static;opacity:1;visibility:visible;padding:2em 5%;background:#333545;}
.no-js .cd-main-search form{margin:0;}
.no-js .cd-main-search input[type="search"]{background:#333545;}
.no-js .cd-main-search select{position:relative;color:#ffffff;opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
.no-js .cd-main-search select:focus{background-color:#3d3f4e;}
.no-js .cd-main-search .selected-value{display:none;}

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