jQuery个人简介特效页面代码

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

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

以下是 jQuery个人简介特效页面代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />	
	<title>关于 我</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body class="loading-process">
<div class="loading">
	<div class="loading-circle"></div>
	<div class="loading-avatar"><img src="images/avatar@2x.jpg" alt="" width="100" height="100"></div>
	<div class="loading-info">正在努力加载中...</div>
</div>
<div class="section-header">
	<div class="section">
		<nav class="nav" role="navigation">
			<ul>
				<li class="nav-about fade fade1"><a href="#about">关于</a></li>
				<li class="nav-works fade fade4"><a href="#works">作品</a></li>
				<li class="fade back-home"><a href="#top">首页</a></li>
				<li class="nav-skill fade fade2"><a href="#skill">能力</a></li>
				<li class="nav-contact fade fade3"><a href="#contact">联系</a></li>
			</ul>
		</nav>
	</div>
	<div class="nav-bg"></div>
</div>
<div class="home-bg">
	<img src="images/home-bg.jpg" alt="" width="1000" height="667">
</div>
<div class="section-wrap section-fristpage" data-slide="1"  >
	<div class="section">
		<div class="section-content">
			<p class="fade fade1">Hi，我是 Aaron</p>
			<p class="fade fade2">欢迎光临</p>
			<p class="fade fade3">想了解更多，往下滚动哦 ^_^</p>
		</div>
		<a class="button2 scroll-tip fade fade4" data-slide="3" title="">向下滚动</a>
	</div>
</div>
<div id="about" data-slide="2" data-stellar-background-ratio="0.3" class="section-wrap section-about">
	<div class="section">
		<div class="about-content clearfix section-content">
			<div class="introli">
			  <span class="left_icon"><img class="bio-text bio-icon-1" src="images/bio-icon-1.png" data-stellar-ratio="0.7" ></span>
			  <span class="right_content "><img class="bio-text bio-text-1" src="images/bio-text-1.png" data-stellar-ratio="0.7" ></span>
			</div>
			<div class="introli">
			  <span class="left_icon"><img class="bio-text bio-icon-2" src="images/bio-icon-2.png" data-stellar-ratio="0.7" ></span>
			  <span class="right_content"><img class="bio-text bio-text-2" src="images/bio-text-2.png" data-stellar-ratio="0.7" ></span>
			</div>
			<div class="introli">
			  <span class="left_icon"><img class="bio-text bio-icon-3" src="images/bio-icon-3.png" data-stellar-ratio="0.7" ></span>
			  <span class="right_content"><img class="bio-text bio-text-3" src="images/bio-text-3.png" data-stellar-ratio="0.7" ></span>
			</div>

		</div>

	</div>
	<a class="button2 dark-button2 scroll-tip" style="background-position:0 -60px;" data-slide="3" title=""></a>
</div>
<div id="works" class="section-wrap section-works" data-slide="3" >
	<div class="section">
		<div class="works-content section-content">
			<h1>前端作品</h1>
			<div class="works-list clearfix">
				<div class="works-item first fade fade1">
					<a href="#/" target="_blank">
						<img src="images/works/yizaojia.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>易造价官网</h2>
							<p><strong>开发时间</strong>：2014年3月<br>
							<strong>工作详情</strong>：框架设计及前端制作。</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade2">
					<a href="#" target="_blank">
						<img src="images/works/91zaojia.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>易造价商城</h2>
							<p><strong>开发时间</strong>：2013年10月<br>
							<strong>工作详情</strong>：页面设计及前端制作。</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade3">
					<a href="#/" target="_blank">
						<img src="images/works/wenku.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>易造价云文库</h2>
							<p><strong>开发时间</strong>：2013年12月<br>
							<strong>工作详情</strong>：页面设计及前端绑定和制作。</p>
						</div>
					</a>
				</div>
				<div class="works-item first fade fade4">
					<a href="#/" target="_blank">
						<img src="images/works/shinedeliver.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>兴安得力官网</h2>
							<p><strong>开发时间</strong>：2012年11月<br>
							<strong>工作详情</strong>：独立开发和制作。</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade2">
					<a>
						<img src="images/works/wxshop.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>微信商城</h2>
							<p><strong>开发时间</strong>：2014年05月<br>
							<strong>工作详情</strong>：前端页面开发及绑定。</p>
						</div>
					</a>
				</div>
			</div>
			<a class="more-link" href="page/product">查看更多</a>
		</div>
		<a class="button2 scroll-tip fade fade4" data-slide="4" title="">向下滚动</a>
	</div>
</div>
<div id="skill" class="section-wrap section-skill" data-slide="4">
	<div class="section">
		<div class="skill-content section-content">
			<h1>相关技能</h1>
			<ul>
				<li class="fade fade1">熟练掌握语义化的 HTML 和具有兼容性的 CSS 模式，熟练手写符合 W3C 标准的结构和代码。</li>
				<li class="fade fade3">对 可用性、可访问性、前端性能优化、最优实践 等有一定的了解和实践。</li>
				<li class="fade fade2">对 HTML5 和 CSS3 有一定了解。</li>
				<li class="fade fade4">熟练掌握 ST2 、Emmet、Sass 等等前端开发和团队协作工具。</li>
				<li class="fade fade4">熟练掌握 jQuery，实现日常需要的交互效果。</li>
				<li class="fade fade3">熟悉EXTJS，Nodejs，MySQl，有一定 PHP 后端相关知识。</li>
				<li class="fade fade2">了解 Ajax 工作原理和实现方法。</li>
				<li class="fade fade2">对前端canvas，svg有一定了解。</li>
				<li class="fade fade1">了解手机前端开发jquerymobile，zeptojs及angularjs等。</li>
				<li class="fade fade4">服务器使用阿里云ECS，对 Linux 有一定了解。</li>
				<li class="fade fade2">喜欢接触新事物，有一定的自学能力。</li>
			</ul>
		</div>
	</div>
	<a class="button2 scroll-tip fade fade4"  data-slide="5" title="">向下滚动</a>
</div>
<div id="contact" class="section-wrap section-contact" data-slide="5">
	<div class="section">
		<div class="contact-content clearfix section-content">
			<h1>联系本人</h1>
			<div class="left">
				<div class="contact-ways fade fade1">
					<h2>社交网络</h2>
					<ul>
						<li>邮箱：</li>
						<li>Q Q ：</li>
						<li>知乎：</li>
						<li>微博：</li>
						<li>Github：</li>
					</ul>
				</div>
				<div class="contact-info fade fade2">
					<p>虽然有社交网络，但是平时上的比较少，很多时候是只看不发！不过你可以关注我哦！</p>
				</div>
			</div>
			<div class="right fade fade3">
				<h2>项目外包</h2>
				<p>如果你有前端相关的需求，可以联系我做外包，目前我主要做：</p>
				<ul>
					<li>网站布局设计及制作，网站页面制作。</li>
					<li>根据需求，对网站前端进行修改和优化，或者转响应式处理。</li>
					<li>企业网站建设及相关功能开发。</li>
					<li>对于网站建设项目，我也有一些同行朋友可以推荐，也欢迎咨询！</li>
				</ul>
			</div>
		</div>
	</div>
	<a class="button2 button2-2-top scroll-tip" id="gototops" data-slide="1" href="#top" style="background-position: -60px 0;width:80px;height:80px;" title=""></a>
</div>

<div class="overlay"></div>
<div class="state-indicator"></div>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/global.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/js.js"></script>
<script src="js/jquery.stellar.min.js"></script>

</body>
</html>

JS代码(global.js):

;
	(function($){
	//杩欐槸涓囨伓鐨勫叏灞€鍙橀噺var Global ={
	section_name:[],isScrolling:true,section_num:1}
;
	//缂撳嚭鐜板嚱鏁?Global.fadeInByOrder = function(selector,interval,callback){
	var i = 1,length = $(selector+' .fade').length + 1,intervala = interval || 100,callbacka = callback || function(){
	return;
}
;
	(function fadeInIt(){
	if ( i < length ){
	$(selector+' .fade'+i).addClass('fade-in');
	i++;
	setTimeout( arguments.callee,intervala );
	if ( i === length){
	callbacka();
}
}
}
)();
}
;
	//鍑芥暟鑺傛祦Global.throttle = function(fn,delay){
	var timer = null;
	return function (){
	var context = this,args = arguments;
	clearTimeout(timer);
	timer = setTimeout(function (){
	fn.apply(context,args);
}
,delay);
}
;
}
;
	//閲嶆柊璁＄畻鍏冪礌浣嶇疆Global.reCal = function(){
	//灞呬腑鍔犺浇鍔ㄧ敾 (function centerLoading(){
	if ( !$('body').hasClass('finish-loading') ){
	var topOffset = ( $(window).height() - 175 ) / 2,leftOffset = ( $(window).width() - $('loading').width() ) / 2 - 60;
	$('.loading').css({
	top:topOffset,left:leftOffset,right:'auto',bottom:'auto'}
);
}
}
)();
	//澶勭悊姣忎釜鍖哄潡 $('.section-wrap').each(function(index,el){
	Global.section_name[index] = $(this).attr('class').substr(($(this).attr('class').indexOf('section-wrap ')+13));
	$(this).find('.section').height($(window).height());
}
);
	//楂樺害灞呬腑涓讳綋鍐呭 $('.section-content').each(function(){
	$(this).css({
	marginTop:( $(window).height() - 40 - $(this).height() ) / 2}
);
}
);
}
;
	//澶勭悊棣栭〉鑳屾櫙鍥剧墖Global.fixedbg = function(){
	var slide_rate = 1000 / 667,window_rate;
	(function(){
	window_rate = $(window).width() / $(window).height();
	if ( window_rate < slide_rate ){
	$('.home-bg img').css({
	height:$(window).height()+'px',width:($(window).height()*slide_rate)+'px','margin-left':'-'+($(window).height()*slide_rate-$(window).width())/2+'px'}
);
}
else{
	$('.home-bg img').css({
	height:($(window).width()/slide_rate)+'px',width:$(window).width()+'px','margin-left':0}
);
}
}
)();
}
;
	//澶撮儴浜や簰Global.shrinkHeader = function(doShrink){
	if (doShrink){
	$('.section-header').addClass('shrink');
}
else{
	$('.section-header').removeClass('shrink');
}
}
;
	//楂樹寒鑿滃崟Global.fire_nav = function(theNav){
	$('.nav .fade').removeClass('hover');
	switch(theNav){
	case 2:$('.nav .fade1').addClass('hover');
	break;
	case 3:$('.nav .fade4').addClass('hover');
	break;
	case 4:$('.nav .fade2').addClass('hover');
	break;
	case 5:$('.nav .fade3').addClass('hover');
	break;
}
}
;
	//榧犳爣婊氬姩鍚庡鐞嗗嚱鏁?Global.scrollHandle = function(scrollDown){
	if (!Global.isScrolling){
	Global.isScrolling = true;
	var targetScrollTopValue = scrollDown ? Global.targetScrollTop(++Global.section_num):Global.targetScrollTop(--Global.section_num);
	if ( scrollDown ){
	if ( Global.section_num > 1 ){
	Global.shrinkHeader(true);
}
}
else{
	if ( Global.section_num === 1 ){
	Global.shrinkHeader(false);
}
}
$('html,body').animate({
	scrollTop:targetScrollTopValue}
,600,function(){
	Global.isScrolling = false;
}
);
	Global.fire_nav(Global.section_num);
}
}
;
	//璁＄畻瑕佹粴鍔ㄥ埌鐨勯珮搴?Global.targetScrollTop = function(n){
	if(n > Global.section_name.length){
	Global.section_num = Global.section_name.length;
}
if(n < 1){
	Global.section_num = 1;
}
return ($(window).height() * (Global.section_num - 1));
}
;
	//鏍规嵁 CSS3 鍒ゆ柇灞忓箷//鍘熺悊锛歨ttp://yujiangshui.com/use-javascript-css-media-queries-detect-device-state/Global.forRetina = function(){
	$('body').append('<div class="state-indicator"></div>');
	function getDeviceState(){
	switch(parseInt($('.state-indicator').css('z-index'),10)){
	case 1:return false;
	case 2:return true;
}
}
if( getDeviceState() ){
	Global.changeDBImg();
}
$('.state-indicator').remove();
}
;
	//灏?img 澶勭悊鎴?@2x 鍍忕礌Global.changeDBImg = function(){
	function changeDBURL(imgURL,imgType){
	return imgURL.substring(0,imgURL.indexOf('.'+imgType)) + '@2x.' + imgType;
}
$('.my-photo').attr('src',function(){
	return changeDBURL($(this).attr('src'),'jpg');
}
);
}
;
	//闈㈠悜骞虫澘鐢佃剳鐨勮Е鎽告墜鍔?Global.handleTouchEvent = function(event){
	if (event.touches.length == 1){
	var touchStartY,touchMoveY;
	switch (event.type){
	case "touchstart":touchStartY = event.touches[0].clientY;
	break;
	case "touchmove":touchMoveY = event.changedTouches[0].clientY;
	break;
}
Global.scrollHandle( touchStartY > touchMoveY ? true:false );
}
event.preventDefault();
}
;
	$(document).ready(function(){
	$('a[href="#"]').click( function(e){
	e.preventDefault();
	return false;
}
);
	Global.reCal();
	Global.fixedbg();
	Global.forRetina();
	$('.nav a').click(function(e){
	var target = $(this).attr('href');
	switch(target){
	case '#top':target = 1;
	break;
	case '#about':target = 2;
	break;
	case '#works':target = 3;
	break;
	case '#skill':target = 4;
	break;
	case '#contact':target = 5;
	break;
}
Global.section_num = target;
	if ( target == 1 ){
	Global.shrinkHeader(false);
	$('.nav .fade').removeClass('hover');
}
else{
	Global.fire_nav(target);
	Global.shrinkHeader(true);
}
$('body,html').animate({
	scrollTop:Global.targetScrollTop(target)}
,600,function(){
}
);
	e.preventDefault();
	return false;
}
);
	$('.scroll-tip').click(function(event){
	if(Global.section_num == 5){
	$('html,body').animate({
	scrollTop:0}
,1000,function(){
	Global.section_num =1}
);
}
else{
	if (!Global.isScrolling){
	Global.isScrolling = true;
	$('html,body').animate({
	scrollTop:Global.targetScrollTop(++Global.section_num)}
,400,function(){
	Global.isScrolling = false;
}
);
	if ( Global.section_num > 1 ){
	Global.shrinkHeader(true);
}
}
}
}
);
}
);
	window.onresize = Global.throttle(function(){
	Global.reCal();
	Global.fixedbg();
}
,50);
	$(window).load(function(){
	Global.fixedbg();
	Global.reCal();
	$('html,body').animate({
	scrollTop:0}
,100);
	Global.isScrolling = false;
	(function load_init(){
	//璧勬簮鍔犺浇瀹屾垚涔嬪悗锛屽紑濮嬪垵濮嬪寲 $("body").addClass('finish-loading');
	$('.finish-loading .loading').animate({
	top:"20px"}
,600,function(){
	$('.back-home').css('opacity',1);
	$('.loading').remove();
}
);
	setTimeout(function(){
	$('body').removeClass('loading-process');
}
,600);
	Global.fadeInByOrder('.nav',100,function(){
	Global.fadeInByOrder('.section-fristpage',300);
}
);
}
)();
}
);
	window.onscroll = Global.throttle(function(){
	$('body').removeClass('finish-loading');
	var fadeInTarget;
	switch(Global.section_num){
	case 1:fadeInTarget = '.section-fristpage';
	$('body').addClass('finish-loading');
	break;
	case 2:fadeInTarget = '.about-content';
	break;
	case 3:fadeInTarget = '.works-list';
	break;
	case 4:fadeInTarget = '.skill-content';
	break;
	case 5:fadeInTarget = '.contact-content';
	break;
}
Global.fadeInByOrder(fadeInTarget,200);
}
,50);
	//鍒ゆ柇榧犳爣婊氬姩鏂瑰悜$(document).on('mousewheel DOMMouseScroll',function(e){
	var e0 = e.originalEvent,delta = e0.wheelDelta || -e0.detail,isMouseScrollDown = delta < 0 ? true:false;
	//澶勭悊濂戒笂涓嬪厓绱犳暟缁勶紝寮€濮嬫粴鍔? if (isMouseScrollDown){
	//榧犳爣鍚戜笅婊氬姩 Global.scrollHandle(true);
}
else{
	Global.scrollHandle(false);
}
e.preventDefault();
}
);
}
)(jQuery);

JS代码(js.js):

jQuery(document).ready(function ($){
	//initialise Stellar.js $(window).stellar();
	//Cache some variables var links = $('.navigation').find('li');
	slide = $('.slide');
	button = $('.button');
	mywindow = $(window);
	htmlbody = $('html,body');
	//Setup waypoints plugin slide.waypoint(function (event,direction){
	//cache the variable of the data-slide attribute associated with each slide dataslide = $(this).attr('data-slide');
	//If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and //remove the active class from the previous navigation link if (direction === 'down'){
	$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
// else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and //remove the active class from the next navigation link else{
	$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
}
);
	//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code,that removes the class //from navigation link slide 2 and adds it to navigation link slide 1. mywindow.scroll(function (){
	if (mywindow.scrollTop() == 0){
	$('.navigation li[data-slide="1"]').addClass('active');
	$('.navigation li[data-slide="2"]').removeClass('active');
}
}
);
	//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery //easing plugin is also used,so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin. function goToByScroll(dataslide){
	htmlbody.animate({
	scrollTop:$('.slide[data-slide="' + dataslide + '"]').offset().top}
,2000,'easeInOutQuint');
}
//When the user clicks on the navigation links,get the data-slide attribute value of the link and pass that variable to the goToByScroll function links.click(function (e){
	e.preventDefault();
	dataslide = $(this).attr('data-slide');
	goToByScroll(dataslide);
}
);
	//When the user clicks on the button,get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function button.click(function (e){
	e.preventDefault();
	dataslide = $(this).attr('data-slide');
	goToByScroll(dataslide);
}
);
}
);

CSS代码(style.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
:focus{outline:0}
h1,h2,h3,h4,h5,h6{font-weight:normal}
.clearfix:before,.section:before,.nav ul:before{content:"";display:table}
.clearfix:after,.section:after,.nav ul:after{content:"";display:table;clear:both}
input{-webkit-appearance:none;border-radius:0}
a{color:#2094c4;text-decoration:none;outline:none}
a:hover{color:#3498db}
p{padding:0 0 20px}
strong{font-weight:bold}
body{color:#000;font:normal 14px/1.4 "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei",\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;width:100%;overflow:hidden}
.left{float:left}
.right{float:right}
.section-wrap{position:relative;z-index:2}
.section{width:960px;margin:0 auto}
.section h1{margin-bottom:40px;font-size:36px}
.overlay{background:#ecf0f1;position:absolute;display:none;top:0;left:0;right:0;bottom:0;z-index:2;opacity:1;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}
.loading-process .overlay{display:block}
.finish-loading .overlay{opacity:0}
.finish-loading .loading-info,.finish-loading .loading-circle{opacity:0}
.finish-loading .loading-avatar{border:4px solid #fff}
.fade{opacity:0;position:relative;top:10px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}
.fade.fade-in{opacity:1;top:0}
.section-header{position:fixed;top:0;left:0;right:0;z-index:20}
.finish-loading .nav{opacity:.6}
.nav{width:960px;position:absolute;z-index:5}
.nav li{float:left;text-align:center;position:relative;width:20%}
.nav li a{color:#fff;font-size:30px;display:block;padding:60px 0;width:100%;-webkit-transition:all 0.6s ease-in;-moz-transition:all 0.6s ease-in;-ms-transition:all 0.6s ease-in;-o-transition:all 0.6s ease-in;transition:all 0.6s ease-in}
.nav .fade1 a:hover,.nav .fade1.hover a{color:#95a5a6}
.nav .fade2 a:hover,.nav .fade2.hover a{color:#2980b9}
.nav .fade3 a:hover,.nav .fade3.hover a{color:#c0392b}
.nav .fade4 a:hover,.nav .fade4.hover a{color:#27ae60}
.nav .back-home{height:1px;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
.nav .back-home a{position:absolute;width:100px;height:100px;left:50%;margin-left:-50px;border-radius:50%;border:4px solid #fff;overflow:hidden;text-indent:-9999px;background:url(../images/avatar.jpg);-webkit-background-size:100px 100px;background-size:100px 100px;padding:0 !important;top:30px}
.nav .back-home a:hover{border-bottom:4px solid #fff}
.nav-bg{background:#000;position:relative;z-index:1;height:80px;margin:0 auto;width:0;-webkit-transition:width 0.6s ease-in;-moz-transition:width 0.6s ease-in;-ms-transition:width 0.6s ease-in;-o-transition:width 0.6s ease-in;transition:width 0.6s ease-in}
.shrink .nav li a{padding:20px 0;font-size:24px}
.shrink .nav .back-home a{top:0}
.shrink .nav-bg{width:100%}
.home-bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1}
.home-bg img{max-width:none}
.loading{margin:auto;position:fixed;top:0;left:0;right:0;bottom:0;width:120px;height:120px;z-index:10}
.loading-circle{background-color:transparent;opacity:.9;border-top:10px solid #27ae60;border-right:10px solid #d35400;border-bottom:10px solid #2980b9;border-left:10px solid #c0392b;border-radius:50%;width:100px;height:100px;margin:0 auto;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;animation:spin 1s infinite linear;-webkit-animation:spin 1s infinite linear;-moz-animation:spin 1s infinite linear;-o-animation:spin 1s infinite linear}
@keyframes spin{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes spin{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-o-keyframes spin{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
.loading-avatar{width:100px;height:100px;overflow:hidden;position:absolute;top:10px;left:10px;border-radius:50%;-webkit-transition:border-width 0.4s ease-in;-moz-transition:border-width 0.4s ease-in;-ms-transition:border-width 0.4s ease-in;-o-transition:border-width 0.4s ease-in;transition:border-width 0.4s ease-in}
.loading-avatar img{width:100px;height:100px;border-radius:50px}
.loading-info{position:absolute;top:130%;width:160%;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}
.section-fristpage{text-align:center;color:#fff;font-size:30px}
.section-fristpage p{padding-bottom:0}
.section-fristpage .fade2{margin-top:60px}
.section-fristpage .fade3{margin-top:60px}
.scroll-tip{display:block;width:60px;height:60px;border-radius:50%;position:absolute;bottom:-30px;top:auto !important;left:50%;margin-left:-30px;text-indent:-9999px;background:#fff url(../images/bg-down-arrow.png) no-repeat 50% 30%}
.section-about{background:#eee url(../images/bg-tile.png) 0 0}
.section-about .about-content h1{margin-bottom:30px;font-size:36px}
.section-about .about-content .introli{width:100%;margin-left:400px;line-height:150%}
.section-about .about-content .introli .bio-text{opacity:0}
.section-about .about-content .introli .left_icon{display:inline-block;width:100px;height:100px}
.section-about .about-content .introli .left_icon .bio-icon-1{-webkit-animation:bio-icon-in2 .6s ease-out .7s 1 forwards;-moz-animation:bio-icon-in2 .6s ease-out .7s 1 forwards}
.section-about .about-content .introli .left_icon .bio-icon-2{-webkit-animation:bio-icon-in2 .6s ease-out 1s 1 forwards;-moz-animation:bio-icon-in2 .6s ease-out 1s 1 forwards}
.section-about .about-content .introli .left_icon .bio-icon-3{-webkit-animation:bio-icon-in2 .6s ease-out 1.3s 1 forwards;-moz-animation:bio-icon-in2 .6s ease-out 1.3s 1 forwards}
.section-about .about-content .introli .right_content .bio-text-1{margin-left:-210px;-webkit-animation:bio-text-in .3s ease-out 0.6s 1 forwards;-moz-animation:bio-text-in .3s ease-out 0.6s 1 forwards}
.section-about .about-content .introli .right_content .bio-text-2{margin-left:-210px;-webkit-animation:bio-text-in .3s ease-out .9s 1 forwards;-moz-animation:bio-text-in .3s ease-out .9s 1 forwards}
.section-about .about-content .introli .right_content .bio-text-3{margin-left:-210px;-webkit-animation:bio-text-in .3s ease-out 1.2s 1 forwards;-moz-animation:bio-text-in .3s ease-out 1.2s 1 forwards}
.section-about .fade{-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in}
@-webkit-keyframes 'bio-text-in'{0%{-webkit-transform:translate(649px,0);opacity:0}
100%{-webkit-transform:translate(0,0);opacity:1}
}
@-webkit-keyframes 'bio-icon-in2'{0%{margin-left:-300px;opacity:0;-webkit-transform:rotate(-60deg)}
100%{margin-left:-269px;opacity:1;-webkit-transform:rotate(0deg)}
}
@-moz-keyframes bio-text-in{0%{opacity:0}
100%{opacity:1}
}
@-moz-keyframes bio-icon-in2{0%{opacity:0}
100%{opacity:1}
}
.section-works{background:#27ae60}
.button2:hover{opacity:1;-webkit-transform:scale(1);cursor:pointer}
.button2{display:block;width:60px;height:60px;position:absolute;bottom:40px;left:50%;margin-left:-30px;opacity:0.75;background:url(../images/arrow.png);-webkit-transition:all .2s ease-in 0s;z-index:9999;-webkit-transform:scale(0.8)}
.dark-button2{background-position:0 -60px}
.button2-2-top{background-position:-60px 0;bottom:none;width:80px;height:80px}
.works-content h1{text-align:center;color:#fff}
.works-content .works-list .fade{top:20px;left:10px;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in}
.works-content .works-list .fade.fade-in{left:0;top:0}
.works-content .works-item{position:relative;width:300px;margin-left:30px;margin-bottom:30px;float:left;overflow:hidden}
.works-content .works-item img{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}
.works-content .works-item.first{margin-left:0}
.works-content .works-item:hover img{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}
.works-content .works-item:hover .work-info{top:0}
.works-content .works-item .work-info{position:absolute;top:137px;padding:10px;left:0;right:0;height:100%;color:#fff;background:rgba(0,0,0,0.8);-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}
.works-content .works-item .work-info h2{margin-bottom:20px}
.more-link{color:#fff;display:block;padding:10px 20px;width:60px;text-align:center;margin:0 auto;background:#3d3d3d;background:rgba(0,0,0,0.6)}
.more-link:hover{color:#fff;background:#3d3d3d;background:rgba(0,0,0,0.4)}
.section-skill{background:#2980b9}
.skill-content h1{color:#fff}
.skill-content ul{color:#fff}
.skill-content li{font-size:18px;line-height:2}
.skill-content .fade{top:0;left:10px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}
.skill-content .fade.fade-in{left:0}
.section-contact{background:#c0392b;color:#dadada}
.section-contact a{color:#fff}
.section-contact a:hover{color:#dadada}
.section-contact .contact-content .left{width:40%}
.section-contact .contact-content .right{width:50%}
.section-contact .contact-content h1{color:#fff;margin-bottom:30px}
.section-contact .contact-content .contact-info{margin-top:20px}
.section-contact .contact-content h2{color:#fff;margin-bottom:20px}
.section-contact .contact-content .right ul{list-style-type:square;padding-left:30px;margin-bottom:20px;line-height:1.6}
.section-contact .contact-ways li{line-height:1.8}
.footer{position:absolute;left:0;right:0;bottom:0;height:40px;background:#000;color:#fff}
.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease}
.a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards}
.a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards}
.a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein}
.a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT}
.a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR}
.a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB}
.a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL}
.a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout}
.a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT}
.a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR}
.a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB}
.a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL}
.a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce}
.a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein}
.a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT}
.a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR}
.a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB}
.a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL}
.a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout}
.a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT}
.a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR}
.a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB}
.a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL}
.a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein}
.a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT}
.a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB}
.a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT}
.a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB}
.a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout}
.a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT}
.a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB}
.a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT}
.a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB}
.a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip}
.a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX}
.a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY}
.a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX}
.a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY}
.a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash}
.a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake}
.a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing}
.a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble}
.a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring}
@-webkit-keyframes fadein{0%{opacity:0}
100%{opacity:1}
}
@-moz-keyframes fadein{0%{opacity:0}
100%{opacity:1}
}
@-ms-keyframes fadein{0%{opacity:0}
100%{opacity:1}
}
@keyframes fadein{0%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes fadeinT{0%{opacity:0;-webkit-transform:translateY(-100px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeinT{0%{opacity:0;-moz-transform:translateY(-100px)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeinT{0%{opacity:0;-ms-transform:translateY(-100px)}
100%{opacity:1;-ms-transform:translateY(0)}
}
@keyframes fadeinT{0%{opacity:0;transform:translateY(-100px)}
100%{opacity:1;transform:translateY(0)}
}
@-webkit-keyframes fadeinR{0%{opacity:0;-webkit-transform:translateX(100px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeinR{0%{opacity:0;-moz-transform:translateX(100px)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeinR{0%{opacity:0;-ms-transform:translateX(100px)}
100%{opacity:1;-ms-transform:translateX(0)}
}
@keyframes fadeinR{0%{opacity:0;transform:translateX(100px)}
100%{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes fadeinB{0%{opacity:0;-webkit-transform:translateY(100px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeinB{0%{opacity:0;-moz-transform:translateY(100px)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeinB{0%{opacity:0;-ms-transform:translateY(100px)}
100%{opacity:1;-ms-transform:translateY(0)}
}
@keyframes fadeinB{0%{opacity:0;transform:translateY(100px)}
100%{opacity:1;transform:translateY(0)}
}
@-webkit-keyframes fadeinL{0%{opacity:0;-webkit-transform:translateX(-100px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeinL{0%{opacity:0;-moz-transform:translateX(-100px)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeinL{0%{opacity:0;-ms-transform:translateX(-100px)}
100%{opacity:1;-ms-transform:translateX(0)}
}
@keyframes fadeinL{0%{opacity:0;transform:translateX(-100px)}
100%{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes fadeout{0%{opacity:1}
100%{opacity:0}
}
@-moz-keyframes fadeout{0%{opacity:1}
100%{opacity:0}
}
@-ms-keyframes fadeout{0%{opacity:1}
100%{opacity:0}
}
@keyframes fadeout{0%{opacity:1}
100%{opacity:0}
}
@-webkit-keyframes fadeoutT{0%{opacity:1;-webkit-transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(-100px)}
}
@-moz-keyframes fadeoutT{0%{opacity:1;-moz-transform:translateY(0)}
100%{opacity:0;-moz-transform:translateY(-100px)}
}
@-ms-keyframes fadeoutT{0%{opacity:1;-ms-transform:translateY(0)}
100%{opacity:0;-ms-transform:translateY(-100px)}
}
@keyframes fadeoutT{0%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(-100px)}
}
@-webkit-keyframes fadeoutR{0%{opacity:1;-webkit-transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(100px)}
}
@-moz-keyframes fadeoutR{0%{opacity:1;-moz-transform:translateX(0)}
100%{opacity:0;-moz-transform:translateX(100px)}
}
@-ms-keyframes fadeoutR{0%{opacity:1;-ms-transform:translateX(0)}
100%{opacity:0;-ms-transform:translateX(100px)}
}
@keyframes fadeoutR{0%{opacity:1;transform:translateX(0)}
100%{opacity:0;transform:translateX(100px)}
}
@-webkit-keyframes fadeoutB{0%{opacity:1;-webkit-transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(100px)}
}
@-moz-keyframes fadeoutB{0%{opacity:1;-moz-transform:translateY(0)}
100%{opacity:0;-moz-transform:translateY(100px)}
}
@-ms-keyframes fadeoutB{0%{opacity:1;-ms-transform:translateY(0)}
100%{opacity:0;-ms-transform:translateY(100px)}
}
@keyframes fadeoutB{0%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(100px)}
}
@-webkit-keyframes fadeoutL{0%{opacity:1;-webkit-transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(-100px)}
}
@-moz-keyframes fadeoutL{0%{opacity:1;-moz-transform:translateX(0)}
100%{opacity:0;-moz-transform:translateX(-100px)}
}
@-ms-keyframes fadeoutL{0%{opacity:1;-ms-transform:translateX(0)}
100%{opacity:0;-ms-transform:translateX(-100px)}
}
@keyframes fadeoutL{0%{opacity:1;transform:translateX(0)}
100%{opacity:0;transform:translateX(-100px)}
}
@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-30px)}
60%{-webkit-transform:translateY(-15px)}
}
@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
40%{-moz-transform:translateY(-30px)}
60%{-moz-transform:translateY(-15px)}
}
@-ms-keyframes bounce{0%,20%,50%,80%,100%{-ms-transform:translateY(0)}
40%{-ms-transform:translateY(-30px)}
60%{-ms-transform:translateY(-15px)}
}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}
40%{transform:translateY(-30px)}
60%{transform:translateY(-15px)}
}
@-webkit-keyframes bouncein{0%{opacity:0;-webkit-transform:scale(0.3)}
50%{opacity:1;-webkit-transform:scale(1.05)}
70%{-webkit-transform:scale(0.9)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes bouncein{0%{opacity:0;-moz-transform:scale(0.3)}
50%{opacity:1;-moz-transform:scale(1.05)}
70%{-moz-transform:scale(0.9)}
100%{-moz-transform:scale(1)}
}
@-ms-keyframes bouncein{0%{opacity:0;-ms-transform:scale(0.3)}
50%{opacity:1;-ms-transform:scale(1.05)}
70%{-ms-transform:scale(0.9)}
100%{-ms-transform:scale(1)}
}
@keyframes bouncein{0%{opacity:0;transform:scale(0.3)}
50%{opacity:1;transform:scale(1.05)}
70%{transform:scale(0.9)}
100%{transform:scale(1)}
}
@-webkit-keyframes bounceinT{0%{opacity:0;-webkit-transform:translateY(-100px)}
60%{opacity:1;-webkit-transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinT{0%{opacity:0;-moz-transform:translateY(-100px)}
60%{opacity:1;-moz-transform:translateY(30px)}
80%{-moz-transform:translateY(-10px)}
100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinT{0%{opacity:0;-ms-transform:translateY(-100px)}
60%{opacity:1;-ms-transform:translateY(30px)}
80%{-ms-transform:translateY(-10px)}
100%{-ms-transform:translateY(0)}
}
@keyframes bounceinT{0%{opacity:0;transform:translateY(-100px)}
60%{opacity:1;transform:translateY(30px)}
80%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}
@-webkit-keyframes bounceinR{0%{opacity:0;-webkit-transform:translateX(100px)}
60%{opacity:1;-webkit-transform:translateX(-30px)}
80%{-webkit-transform:translateX(10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceinR{0%{opacity:0;-moz-transform:translateX(100px)}
60%{opacity:1;-moz-transform:translateX(-30px)}
80%{-moz-transform:translateX(10px)}
100%{-moz-transform:translateX(0)}
}
@-ms-keyframes bounceinR{0%{opacity:0;-ms-transform:translateX(100px)}
60%{opacity:1;-ms-transform:translateX(-30px)}
80%{-ms-transform:translateX(10px)}
100%{-ms-transform:translateX(0)}
}
@keyframes bounceinR{0%{opacity:0;transform:translateX(100px)}
60%{opacity:1;transform:translateX(-30px)}
80%{transform:translateX(10px)}
100%{transform:translateX(0)}
}
@-webkit-keyframes bounceinB{0%{opacity:0;-webkit-transform:translateY(100px)}
60%{opacity:1;-webkit-transform:translateY(-30px)}
80%{-webkit-transform:translateY(10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinB{0%{opacity:0;-moz-transform:translateY(100px)}
60%{opacity:1;-moz-transform:translateY(-30px)}
80%{-moz-transform:translateY(10px)}
100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinB{0%{opacity:0;-ms-transform:translateY(100px)}
60%{opacity:1;-ms-transform:translateY(-30px)}
80%{-ms-transform:translateY(10px)}
100%{-ms-transform:translateY(0)}
}
@keyframes bounceinB{0%{opacity:0;transform:translateY(100px)}
60%{opacity:1;transform:translateY(-30px)}
80%{transform:translateY(10px)}
100%{transform:translateY(0)}
}
@-webkit-keyframes bounceinL{0%{opacity:0;-webkit-transform:translateX(-100px)}
60%{opacity:1;-webkit-transform:translateX(30px)}
80%{-webkit-transform:translateX(-10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceinL{0%{opacity:0;-moz-transform:translateX(-100px)}
60%{opacity:1;-moz-transform:translateX(30px)}
80%{-moz-transform:translateX(-10px)}
100%{-moz-transform:translateX(0)}
}
@-ms-keyframes bounceinL{0%{opacity:0;-ms-transform:translateX(-100px)}
60%{opacity:1;-ms-transform:translateX(30px)}
80%{-ms-transform:translateX(-10px)}
100%{-ms-transform:translateX(0)}
}
@keyframes bounceinL{0%{opacity:0;transform:translateX(-100px)}
60%{opacity:1;transform:translateX(30px)}
80%{transform:translateX(-10px)}
100%{transform:translateX(0)}
}
@-webkit-keyframes bounceout{0%{-webkit-transform:scale(1)}
25%{-webkit-transform:scale(0.95)}
50%{opacity:1;-webkit-transform:scale(1.1)}
100%{opacity:0;-webkit-transform:scale(0.3)}
}
@-moz-keyframes bounceout{0%{-moz-transform:scale(1)}
25%{-moz-transform:scale(0.95)}
50%{opacity:1;-moz-transform:scale(1.1)}
100%{opacity:0;-moz-transform:scale(0.3)}
}
@-ms-keyframes bounceout{0%{-ms-transform:scale(1)}
25%{-ms-transform:scale(0.95)}
50%{opacity:1;-ms-transform:scale(1.1)}
100%{opacity:0;-ms-transform:scale(0.3)}
}
@keyframes bounceout{0%{transform:scale(1)}
25%{transform:scale(0.95)}
50%{opacity:1;transform:scale(1.1)}
100%{opacity:0;transform:scale(0.3)}
}
@-webkit-keyframes bounceoutT{0%{-webkit-transform:translateY(0)}
20%{opacity:1;-webkit-transform:translateY(20px)}
100%{opacity:0;-webkit-transform:translateY(-100px)}
}
@-moz-keyframes bounceoutT{0%{-moz-transform:translateY(0)}
20%{opacity:1;-moz-transform:translateY(20px)}
100%{opacity:0;-moz-transform:translateY(-100px)}
}
@-ms-keyframes bounceoutT{0%{-ms-transform:translateY(0)}
20%{opacity:1;-ms-transform:translateY(20px)}
100%{opacity:0;-ms-transform:translateY(-100px)}
}
@keyframes bounceoutT{0%{transform:translateY(0)}
20%{opacity:1;transform:translateY(20px)}
100%{opacity:0;transform:translateY(-100px)}
}
@-webkit-keyframes bounceoutR{0%{-webkit-transform:translateX(0)}
20%{opacity:1;-webkit-transform:translateX(-20px)}
100%{opacity:0;-webkit-transform:translateX(100px)}
}
@-moz-keyframes bounceoutR{0%{-moz-transform:translateX(0)}
20%{opacity:1;-moz-transform:translateX(-20px)}
100%{opacity:0;-moz-transform:translateX(100px)}
}
@-ms-keyframes bounceoutR{0%{-ms-transform:translateX(0)}
20%{opacity:1;-ms-transform:translateX(-20px)}
100%{opacity:0;-ms-transform:translateX(100px)}
}
@keyframes bounceoutR{0%{transform:translateX(0)}
20%{opacity:1;transform:translateX(-20px)}
100%{opacity:0;transform:translateX(100px)}
}
@-webkit-keyframes bounceoutB{0%{-webkit-transform:translateY(0)}
20%{opacity:1;-webkit-transform:translateY(-20px)}
100%{opacity:0;-webkit-transform:translateY(100px)}
}
@-moz-keyframes bounceoutB{0%{-moz-transform:translateY(0)}
20%{opacity:1;-moz-transform:translateY(-20px)}
100%{opacity:0;-moz-transform:translateY(100px)}
}
@-ms-keyframes bounceoutB{0%{-ms-transform:translateY(0)}
20%{opacity:1;-ms-transform:translateY(-20px)}
100%{opacity:0;-ms-transform:translateY(100px)}
}
@keyframes bounceoutB{0%{transform:translateY(0)}
20%{opacity:1;transform:translateY(-20px)}
100%{opacity:0;transform:translateY(100px)}
}
@-webkit-keyframes bounceoutL{0%{-webkit-transform:translateX(0)}
20%{opacity:1;-webkit-transform:translateX(20px)}
100%{opacity:0;-webkit-transform:translateX(-100px)}
}
@-moz-keyframes bounceoutL{0%{-moz-transform:translateX(0)}
20%{opacity:1;-moz-transform:translateX(20px)}
100%{opacity:0;-moz-transform:translateX(-100px)}
}
@-ms-keyframes bounceoutL{0%{-ms-transform:translateX(0)}
20%{opacity:1;-ms-transform:translateX(20px)}
100%{opacity:0;-ms-transform:translateX(-100px)}
}
@keyframes bounceoutL{0%{transform:translateX(0)}
20%{opacity:1;transform:translateX(20px)}
100%{opacity:0;transform:translateX(-200px)}
}
@-webkit-keyframes rotatein{0%{opacity:0;-webkit-transform:rotate(-200deg)}
100%{opacity:1;-webkit-transform:rotate(0)}
}
@-moz-keyframes rotatein{0%{opacity:0;-moz-transform:rotate(-200deg)}
100%{opacity:1;-moz-transform:rotate(0)}
}
@-ms-keyframes rotatein{0%{opacity:0;-ms-transform:rotate(-200deg)}
100%{opacity:1;-ms-transform:rotate(0)}
}
@keyframes rotatein{0%{opacity:0;transform:rotate(-200deg)}
100%{opacity:1;transform:rotate(0)}
}
@-webkit-keyframes rotateinLT{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinLT{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinLT{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinLT{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
@-webkit-keyframes rotateineftB{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateineftB{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateineftB{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateineftB{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
@-webkit-keyframes rotateinRT{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinRT{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinRT{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinRT{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
@-webkit-keyframes rotateinRB{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinRB{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinRB{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinRB{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
@-webkit-keyframes rotateout{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0}
}
@-moz-keyframes rotateout{0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}
100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0}
}
@-ms-keyframes rotateout{0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1}
100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0}
}
@keyframes rotateout{0%{transform-origin:center center;transform:rotate(0);opacity:1}
100%{transform-origin:center center;transform:rotate(200deg);opacity:0}
}
@-webkit-keyframes rotateoutLT{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
}
@-moz-keyframes rotateoutLT{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
}
@-ms-keyframes rotateoutLT{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
}
@keyframes rotateoutLT{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
}
@-webkit-keyframes rotateoutLB{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
}
@-moz-keyframes rotateoutLB{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}
}
@-ms-keyframes rotateoutLB{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}
}
@keyframes rotateoutLB{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
}
@-webkit-keyframes rotateoutRT{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
}
@-moz-keyframes rotateoutRT{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
}
@-ms-keyframes rotateoutRT{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
}
@keyframes rotateoutRT{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
}
@-webkit-keyframes rotateoutBR{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}
}
@-moz-keyframes rotateoutBR{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}
}
@-ms-keyframes rotateoutBR{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}
}
@keyframes rotateoutBR{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in}
}
@-moz-keyframes flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out}
40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out}
50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in}
80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in}
100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in}
}
@-ms-keyframes flip{0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out}
40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out}
50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in}
80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in}
100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in}
}
@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}
40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}
50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}
80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in}
100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}
}
@-webkit-keyframes flipinX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
70%{-webkit-transform:perspective(400px) rotateX(10deg)}
100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
}
@-moz-keyframes flipinX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
40%{-moz-transform:perspective(400px) rotateX(-10deg)}
70%{-moz-transform:perspective(400px) rotateX(10deg)}
100%{-moz-transform:perspective(400px) rotateX(0);opacity:1}
}
@-ms-keyframes flipinX{0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}
40%{-ms-transform:perspective(400px) rotateX(-10deg)}
70%{-ms-transform:perspective(400px) rotateX(10deg)}
100%{-ms-transform:perspective(400px) rotateX(0);opacity:1}
}
@keyframes flipinX{0%{transform:perspective(400px) rotateX(90deg);opacity:0}
40%{transform:perspective(400px) rotateX(-10deg)}
70%{transform:perspective(400px) rotateX(10deg)}
100%{transform:perspective(400px) rotateX(0);opacity:1}
}
@-webkit-keyframes flipinY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
70%{-webkit-transform:perspective(400px) rotateY(10deg)}
100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}
}
@-moz-keyframes flipinY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
40%{-moz-transform:perspective(400px) rotateY(-10deg)}
70%{-moz-transform:perspective(400px) rotateY(10deg)}
100%{-moz-transform:perspective(400px) rotateY(0);opacity:1}
}
@-ms-keyframes flipinY{0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}
40%{-ms-transform:perspective(400px) rotateY(-10deg)}
70%{-ms-transform:perspective(400px) rotateY(10deg)}
100%{-ms-transform:perspective(400px) rotateY(0);opacity:1}
}
@keyframes flipinY{0%{transform:perspective(400px) rotateY(90deg);opacity:0}
40%{transform:perspective(400px) rotateY(-10deg)}
70%{transform:perspective(400px) rotateY(10deg)}
100%{transform:perspective(400px) rotateY(0);opacity:1}
}
@-webkit-keyframes flipoutX{0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-moz-keyframes flipoutX{0%{-moz-transform:perspective(400px) rotateX(0);opacity:1}
100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-ms-keyframes flipoutX{0%{-ms-transform:perspective(400px) rotateX(0);opacity:1}
100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@keyframes flipoutX{0%{transform:perspective(400px) rotateX(0);opacity:1}
100%{transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-webkit-keyframes flipoutY{0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}
100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@-moz-keyframes flipoutY{0%{-moz-transform:perspective(400px) rotateY(0);opacity:1}
100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@-ms-keyframes flipoutY{0%{-ms-transform:perspective(400px) rotateY(0);opacity:1}
100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@keyframes flipoutY{0%{transform:perspective(400px) rotateY(0);opacity:1}
100%{transform:perspective(400px) rotateY(90deg);opacity:0}
}
@-webkit-keyframes flash{0%,50%,100%{opacity:1}
25%,75%{opacity:0}
}
@-moz-keyframes flash{0%,50%,100%{opacity:1}
25%,75%{opacity:0}
}
@-ms-keyframes flash{0%,50%,100%{opacity:1}
25%,75%{opacity:0}
}
@keyframes flash{0%,50%,100%{opacity:1}
25%,75%{opacity:0}
}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0)}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}
20%,40%,60%,80%{-webkit-transform:translateX(10px)}
}
@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0)}
10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}
20%,40%,60%,80%{-moz-transform:translateX(10px)}
}
@-ms-keyframes shake{0%,100%{-ms-transform:translateX(0)}
10%,30%,50%,70%,90%{-ms-transform:translateX(-10px)}
20%,40%,60%,80%{-ms-transform:translateX(10px)}
}
@keyframes shake{0%,100%{transform:translateX(0)}
10%,30%,50%,70%,90%{transform:translateX(-10px)}
20%,40%,60%,80%{transform:translateX(10px)}
}
@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0)}
}
@-moz-keyframes swing{20%{-moz-transform:rotate(15deg)}
40%{-moz-transform:rotate(-10deg)}
60%{-moz-transform:rotate(5deg)}
80%{-moz-transform:rotate(-5deg)}
100%{-moz-transform:rotate(0)}
}
@-ms-keyframes swing{20%{-ms-transform:rotate(15deg)}
40%{-ms-transform:rotate(-10deg)}
60%{-ms-transform:rotate(5deg)}
80%{-ms-transform:rotate(-5deg)}
100%{-ms-transform:rotate(0)}
}
@keyframes swing{20%{transform:rotate(15deg)}
40%{transform:rotate(-10deg)}
60%{transform:rotate(5deg)}
80%{transform:rotate(-5deg)}
100%{transform:rotate(0)}
}
@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0)}
15%{-webkit-transform:translateX(-100px) rotate(-5deg)}
30%{-webkit-transform:translateX(80px) rotate(3deg)}
45%{-webkit-transform:translateX(-65px) rotate(-3deg)}
60%{-webkit-transform:translateX(40px) rotate(2deg)}
75%{-webkit-transform:translateX(-20px) rotate(-1deg)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes wobble{0%{-moz-transform:translateX(0)}
15%{-moz-transform:translateX(-100px) rotate(-5deg)}
30%{-moz-transform:translateX(80px) rotate(3deg)}
45%{-moz-transform:translateX(-65px) rotate(-3deg)}
60%{-moz-transform:translateX(40px) rotate(2deg)}
75%{-moz-transform:translateX(-20px) rotate(-1deg)}
100%{-moz-transform:translateX(0)}
}
@-ms-keyframes wobble{0%{-ms-transform:translateX(0)}
15%{-ms-transform:translateX(-100px) rotate(-5deg)}
30%{-ms-transform:translateX(80px) rotate(3deg)}
45%{-ms-transform:translateX(-65px) rotate(-3deg)}
60%{-ms-transform:translateX(40px) rotate(2deg)}
75%{-ms-transform:translateX(-20px) rotate(-1deg)}
100%{-ms-transform:translateX(0)}
}
@keyframes wobble{0%{transform:translateX(0)}
15%{transform:translateX(-100px) rotate(-5deg)}
30%{transform:translateX(80px) rotate(3deg)}
45%{transform:translateX(-65px) rotate(-3deg)}
60%{transform:translateX(40px) rotate(2deg)}
75%{transform:translateX(-20px) rotate(-1deg)}
100%{transform:translateX(0)}
}
@-webkit-keyframes ring{0%{-webkit-transform:scale(1)}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
100%{-webkit-transform:scale(1) rotate(0)}
}
@-moz-keyframes ring{0%{-moz-transform:scale(1)}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
100%{-moz-transform:scale(1) rotate(0)}
}
@-ms-keyframes ring{0%{-ms-transform:scale(1)}
10%,20%{-ms-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg)}
100%{-ms-transform:scale(1) rotate(0)}
}
@keyframes ring{0%{transform:scale(1)}
10%,20%{transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
100%{transform:scale(1) rotate(0)}
}
.state-indicator{position:absolute;top:-999em;left:-999em;z-index:1}
@media only screen and (-webkit-min-device-pixel-ratio:2){.state-indicator{z-index:2}
.nav .back-home a{background-image:url(../images/avatar@2x.jpg)}
}
@media only screen and (max-width:1024px){.works-content{margin-top:140px !important}
}
@media only screen and (max-width:960px){.nav{width:760px}
.section{width:760px}
}
@media only screen and (max-width:800px){.section-about .about-content{position:relative}
.section-about .about-content .left{float:none;margin:20px 0 0 20px}
.section-about .about-content .right{position:absolute;right:10px;top:0}
.section-about .about-content .my-photo{width:250px;height:auto}
.works-list{width:630px;margin:0 auto}
.works-content .works-item:nth-child(2n+1){margin-left:0 !important}
.works-content .works-item:nth-child(2n){margin-left:30px !important}
.skill-content{width:600px;margin:0 auto}
.contact-content{width:600px;margin:0 auto}
.section-contact .contact-content h1{text-align:center}
}

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