经验分享程序开发文档资料数据资源其它资源

CSS3预加载Loading动画特效

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3预加载Loading动画特效 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

CSS3预加载Loading动画特效

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<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>CSS3预加载Loading动画特效 </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<ul id="arrows">
	<li><a class="next" href="" title="">&#10095;</a></li>
	<li><a class="prev" href="" title="">&#10094;</a></li>
</ul>
<ul id="spinners">
	<li class="active" data-id="1">
		<div id="preloader_1">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

	</li>

	<li data-id="2">

		<div id="preloader_2">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

	</li>

	<li data-id="3">

		<div id="preloader_3"></div>

	</li>

	<li data-id="4">

		<div id="preloader_4">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

	</li>

	<li data-id="5">
		<div id="preloader5"></div>
	</li>

	<li data-id="6">
		<div id="preloader6">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

	</li>
</ul>

<ul id="pagination">
	<li><a data-id="1" class="pag_active" href="" title=""></a></li>
	<li><a data-id="2" href="" title=""></a></li>
	<li><a data-id="3" href="" title=""></a></li>
	<li><a data-id="4" href="" title=""></a></li>
	<li><a data-id="5" href="" title=""></a></li>
	<li><a data-id="6" href="" title=""></a></li>
	<span class="clear"></span>
</ul>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>

JS代码(js.js):

jQuery(document).ready(function($){
	next = jQuery('.next');
	prev = jQuery('.prev');
	pagination = jQuery('#pagination li a');
	pagination.click(function(e){
	e.preventDefault();
	mythis = jQuery(this);
	thisid = jQuery(this).attr('data-id');
	pagination.removeClass();
	mythis.addClass('pag_active');
	jQuery('.active').removeClass();
	jQuery('#spinners li[data-id="'+thisid+'"]').addClass('active');
}
);
	next.click(function(e){
	e.preventDefault();
	thisid = jQuery('.active').attr('data-id');
	if (thisid == 6){
	jQuery('.active').removeClass();
	jQuery('#spinners').find('li:first-child').addClass('active');
	pagination.removeClass('pag_active');
	jQuery('#pagination li a[data-id="1"]').addClass('pag_active');
}
else{
	jQuery('.active').removeClass().next().addClass('active');
	jQuery('.pag_active').removeClass('pag_active').parent().next().find('a').addClass('pag_active');
}
}
);
	prev.click(function(e){
	e.preventDefault();
	thisid = jQuery('.active').attr('data-id');
	console.log(thisid);
	if (thisid == 1){
	jQuery('.active').removeClass();
	jQuery('#spinners').find('li:last-child').addClass('active');
	pagination.removeClass('pag_active');
	jQuery('#pagination li a[data-id="6"]').addClass('pag_active');
}
else{
	jQuery('.active').removeClass().prev().addClass('active');
	jQuery('.pag_active').removeClass('pag_active').parent().prev().find('a').addClass('pag_active');
}
}
);
}
);

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
/*Copyright (c) 2010,Yahoo! Inc. All rights reserved.Code licensed under the BSD License:http://developer.yahoo.com/yui/license.htmlversion:3.3.0build:3167*/
html{color:#000;background:#ecf0f1;height:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
*{box-sizing:border-box;}
body{min-height:100%;}
#spinners{position:absolute;top:50%;left:50%;}
#spinners li{position:absolute;float:left;width:100px;height:50px;top:0px;left:0px;opacity:0;-webkit-transition:all .3s ease-in-out;-webkit-transform:translateX(-100px);-moz-transition:all .3s ease-in-out;-moz-transform:translateX(-100px);-ms-transition:all .3s ease-in-out;-ms-transform:translateX(-100px);transition:all .3s ease-in-out;transform:translateX(-100px);}
.next,.prev{width:50px;font-size:53px;position:absolute;top:50%;right:20px;text-decoration:none;color:#7f8c8d;margin-top:-30px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.prev{left:20px;}
.next:hover,.prev:hover{color:#3498db;}
#pagination{width:140px;position:fixed;bottom:20px;left:50%;margin-left:-54px;}
#pagination li a{width:18px;height:18px;background:#7F8C8D;float:left;margin-right:5px;border-radius:20px;display:block;}
#pagination li a.pag_active{background:#3498DB;}
.clear{clear:both;display:block;}
#spinners li.active{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}
#spinners li:nth-child(2){margin-top:-17px;margin-left:-43px;}
#spinners li:nth-child(3){margin-top:-14px;margin-left:6px;}
#spinners li:nth-child(3){margin-top:-10px;}
#spinners li:nth-child(4){margin-left:-22px;margin-top:-8px;}
#spinners li:nth-child(5){margin-left:19px;margin-top:-10px;}
#spinners li:nth-child(6){margin-top:-21px}
/******************* PRELOADER 1 *****************************************************/
#preloader_1{position:relative;}
#preloader_1 span{display:block;bottom:0px;width:9px;height:5px;background:#9b59b6;position:absolute;-webkit-animation:preloader_1 1.5s infinite ease-in-out;-moz-animation:preloader_1 1.5s infinite ease-in-out;-ms-animation:preloader_1 1.5s infinite ease-in-out;-o-animation:preloader_1 1.5s infinite ease-in-out;animation:preloader_1 1.5s infinite ease-in-out;}
#preloader_1 span:nth-child(2){left:11px;-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-ms-animation-delay:.2s;-o-animation-delay:.2s;animation-delay:.2s;}
#preloader_1 span:nth-child(3){left:22px;-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-ms-animation-delay:.4s;-o-animation-delay:.4s;animation-delay:.4s;}
#preloader_1 span:nth-child(4){left:33px;-webkit-animation-delay:.6s;-moz-animation-delay:.6s;-ms-animation-delay:.6s;-o-animation-delay:.6s;animation-delay:.6s;}
#preloader_1 span:nth-child(5){left:44px;-webkit-animation-delay:.8s;-moz-animation-delay:.8s;-ms-animation-delay:.8s;-o-animation-delay:.8s;animation-delay:.8s;}
@-webkit-keyframes preloader_1{0%{height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
25%{height:30px;-webkit-transform:translateY(15px);background:#3498db;}
50%{height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
100%{height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
}
@-moz-keyframes preloader_1{0%{height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
25%{height:30px;-moz-transform:translateY(15px);background:#3498db;}
50%{height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
100%{height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
}
@-ms-keyframes preloader_1{0%{height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
25%{height:30px;-ms-transform:translateY(15px);background:#3498db;}
50%{height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
100%{height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
}
@keyframes preloader_1{0%{height:5px;transform:translateY(0px);background:#9b59b6;}
25%{height:30px;transform:translateY(15px);background:#3498db;}
50%{height:5px;transform:translateY(0px);background:#9b59b6;}
100%{height:5px;transform:translateY(0px);background:#9b59b6;}
}
/******************* PRELOADER 2 *****************************************************/
#preloader_2{position:relative;left:50%;width:40px;height:40px;}
#preloader_2 span{display:block;bottom:0px;width:20px;height:20px;background:#9b59b6;position:absolute;}
#preloader_2 span:nth-child(1){-webkit-animation:preloader_2_1 1.5s infinite ease-in-out;-moz-animation:preloader_2_1 1.5s infinite ease-in-out;-ms-animation:preloader_2_1 1.5s infinite ease-in-out;animation:preloader_2_1 1.5s infinite ease-in-out;}
#preloader_2 span:nth-child(2){left:20px;-webkit-animation:preloader_2_2 1.5s infinite ease-in-out;-moz-animation:preloader_2_2 1.5s infinite ease-in-out;-ms-animation:preloader_2_2 1.5s infinite ease-in-out;animation:preloader_2_2 1.5s infinite ease-in-out;}
#preloader_2 span:nth-child(3){top:0px;-webkit-animation:preloader_2_3 1.5s infinite ease-in-out;-moz-animation:preloader_2_3 1.5s infinite ease-in-out;-ms-animation:preloader_2_3 1.5s infinite ease-in-out;animation:preloader_2_3 1.5s infinite ease-in-out;}
#preloader_2 span:nth-child(4){top:0px;left:20px;-webkit-animation:preloader_2_4 1.5s infinite ease-in-out;-moz-animation:preloader_2_4 1.5s infinite ease-in-out;-ms-animation:preloader_2_4 1.5s infinite ease-in-out;animation:preloader_2_4 1.5s infinite ease-in-out;}
@-webkit-keyframes preloader_2_1{0%{-webkit-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-webkit-transform:translateX(-20px) translateY(-10px) rotate(-180deg);border-radius:20px;background:#3498db;}
80%{-webkit-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100%{-webkit-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
}
@-webkit-keyframes preloader_2_2{0%{-webkit-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-webkit-transform:translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80%{-webkit-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100%{-webkit-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-webkit-keyframes preloader_2_3{0%{-webkit-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-webkit-transform:translateX(-20px) translateY(10px) rotate(-180deg);border-radius:20px;background:#2ecc71;}
80%{-webkit-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100%{-webkit-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
}
@-webkit-keyframes preloader_2_4{0%{-webkit-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-webkit-transform:translateX(20px) translateY(10px) rotate(180deg);border-radius:20px;background:#e74c3c;}
80%{-webkit-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100%{-webkit-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-moz-keyframes preloader_2_1{0%{-moz-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-moz-transform:translateX(-20px) translateY(-10px) rotate(-180deg);border-radius:20px;background:#3498db;}
80%{-moz-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100%{-moz-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
}
@-moz-keyframes preloader_2_2{0%{-moz-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-moz-transform:translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80%{-moz-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100%{-moz-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-moz-keyframes preloader_2_3{0%{-moz-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-moz-transform:translateX(-20px) translateY(10px) rotate(-180deg);border-radius:20px;background:#2ecc71;}
80%{-moz-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100%{-moz-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
}
@-moz-keyframes preloader_2_4{0%{-moz-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-moz-transform:translateX(20px) translateY(10px) rotate(180deg);border-radius:20px;background:#e74c3c;}
80%{-moz-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100%{-moz-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-ms-keyframes preloader_2_1{0%{-ms-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-ms-transform:translateX(-20px) translateY(-10px) rotate(-180deg);border-radius:20px;background:#3498db;}
80%{-ms-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100%{-ms-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
}
@-ms-keyframes preloader_2_2{0%{-ms-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-ms-transform:translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80%{-ms-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100%{-ms-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-ms-keyframes preloader_2_3{0%{-ms-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-ms-transform:translateX(-20px) translateY(10px) rotate(-180deg);border-radius:20px;background:#2ecc71;}
80%{-ms-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100%{-ms-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
}
@-ms-keyframes preloader_2_4{0%{-ms-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-ms-transform:translateX(20px) translateY(10px) rotate(180deg);border-radius:20px;background:#e74c3c;}
80%{-ms-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100%{-ms-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_1{0%{-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-transform:translateX(-20px) translateY(-10px) rotate(-180deg);border-radius:20px;background:#3498db;}
80%{-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100%{-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
}
@-keyframes preloader_2_2{0%{-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-transform:translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80%{-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100%{-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3{0%{-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-transform:translateX(-20px) translateY(10px) rotate(-180deg);border-radius:20px;background:#2ecc71;}
80%{-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100%{-transform:translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
}
@-keyframes preloader_2_4{0%{-transform:translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50%{-transform:translateX(20px) translateY(10px) rotate(180deg);border-radius:20px;background:#e74c3c;}
80%{-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100%{-transform:translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
/******************* PRELOADER 3 *****************************************************/
#preloader_3{position:relative;}
#preloader_3:before{width:20px;height:20px;border-radius:20px;background:blue;content:'';position:absolute;background:#9b59b6;-webkit-animation:preloader_3_before 1.5s infinite ease-in-out;-moz-animation:preloader_3_before 1.5s infinite ease-in-out;-ms-animation:preloader_3_before 1.5s infinite ease-in-out;animation:preloader_3_before 1.5s infinite ease-in-out;}
#preloader_3:after{width:20px;height:20px;border-radius:20px;background:blue;content:'';position:absolute;background:#2ecc71;left:22px;-webkit-animation:preloader_3_after 1.5s infinite ease-in-out;-moz-animation:preloader_3_after 1.5s infinite ease-in-out;-ms-animation:preloader_3_after 1.5s infinite ease-in-out;animation:preloader_3_after 1.5s infinite ease-in-out;}
@-webkit-keyframes preloader_3_before{0%{-webkit-transform:translateX(0px) rotate(0deg)}
50%{-webkit-transform:translateX(50px) scale(1.2) rotate(260deg);background:#2ecc71;border-radius:0px;}
100%{-webkit-transform:translateX(0px) rotate(0deg)}
}
@-webkit-keyframes preloader_3_after{0%{-webkit-transform:translateX(0px)}
50%{-webkit-transform:translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100%{-webkit-transform:translateX(0px)}
}
@-moz-keyframes preloader_3_before{0%{-moz-transform:translateX(0px) rotate(0deg)}
50%{-moz-transform:translateX(50px) scale(1.2) rotate(260deg);background:#2ecc71;border-radius:0px;}
100%{-moz-transform:translateX(0px) rotate(0deg)}
}
@-moz-keyframes preloader_3_after{0%{-moz-transform:translateX(0px)}
50%{-moz-transform:translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100%{-moz-transform:translateX(0px)}
}
@-ms-keyframes preloader_3_before{0%{-ms-transform:translateX(0px) rotate(0deg)}
50%{-ms-transform:translateX(50px) scale(1.2) rotate(260deg);background:#2ecc71;border-radius:0px;}
100%{-ms-transform:translateX(0px) rotate(0deg)}
}
@-ms-keyframes preloader_3_after{0%{-ms-transform:translateX(0px)}
50%{-ms-transform:translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100%{-ms-transform:translateX(0px)}
}
@keyframes preloader_3_before{0%{transform:translateX(0px) rotate(0deg)}
50%{transform:translateX(50px) scale(1.2) rotate(260deg);background:#2ecc71;border-radius:0px;}
100%{transform:translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after{0%{transform:translateX(0px)}
50%{transform:translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100%{transform:translateX(0px)}
}
/******************* PRELOADER 4 *****************************************************/
#preloader_4{position:relative;}
#preloader_4 span{position:absolute;width:20px;height:20px;background:#3498db;opacity:0.5;border-radius:20px;-webkit-animation:preloader_4 1s infinite ease-in-out;-moz-animation:preloader_4 1s infinite ease-in-out;-ms-animation:preloader_4 1s infinite ease-in-out;-animation:preloader_4 1s infinite ease-in-out;}
#preloader_4 span:nth-child(2){left:20px;-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-ms-animation-delay:.2s;animation-delay:.2s;}
#preloader_4 span:nth-child(3){left:40px;-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-ms-animation-delay:.4s;animation-delay:.4s;}
#preloader_4 span:nth-child(4){left:60px;-webkit-animation-delay:.6s;-moz-animation-delay:.6s;-ms-animation-delay:.6s;animation-delay:.6s;}
#preloader_4 span:nth-child(5){left:80px;-webkit-animation-delay:.8s;-moz-animation-delay:.8s;-ms-animation-delay:.8s;animation-delay:.8s;}
@-webkit-keyframes preloader_4{0%{opacity:0.3;-webkit-transform:translateY(0px);box-shadow:0px 0px 3px rgba(0,0,0,0.1);}
50%{opacity:1;-webkit-transform:translateY(-10px);background:#f1c40f;box-shadow:0px 20px 3px rgba(0,0,0,0.05);}
100%{opacity:0.3;-webkit-transform:translateY(0px);box-shadow:0px 0px 3px rgba(0,0,0,0.1);}
}
@-moz-keyframes preloader_4{0%{opacity:0.3;-moz-transform:translateY(0px);box-shadow:0px 0px 3px rgba(0,0,0,0.1);}
50%{opacity:1;-moz-transform:translateY(-10px);background:#f1c40f;box-shadow:0px 20px 3px rgba(0,0,0,0.05);}
100%{opacity:0.3;-moz-transform:translateY(0px);box-shadow:0px 0px 3px rgba(0,0,0,0.1);}
}
@-ms-keyframes preloader_4{0%{opacity:0.3;-ms-transform:translateY(0px);box-shadow:0px 0px 3px rgba(0,0,0,0.1);}
50%{opacity:1;-ms-transform:translateY(-10px);background:#f1c40f;box-shadow:0px 20px 3px rgba(0,0,0,0.05);}
100%{opacity:0.3;-ms-transform:translateY(0px);box-shadow:0px 0px 3px rgba(0,0,0,0.1);}
}
@keyframes preloader_4{0%{opacity:0.3;transform:translateY(0px);box-shadow:0px 0px 3px rgba(0,0,0,0.1);}
50%{opacity:1;transform:translateY(-10px);background:#f1c40f;box-shadow:0px 20px 3px rgba(0,0,0,0.05);}
100%{opacity:0.3;transform:translateY(0px);box-shadow:0px 0px 3px rgba(0,0,0,0.1);}
}
/******************* PRELOADER 5 *****************************************************/
#preloader5{position:relative;width:30px;height:30px;background:#3498db;border-radius:50px;-webkit-animation:preloader_5 1.5s infinite linear;-moz-animation:preloader_5 1.5s infinite linear;-ms-animation:preloader_5 1.5s infinite linear;animation:preloader_5 1.5s infinite linear;}
#preloader5:after{position:absolute;width:50px;height:50px;border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;border-left:10px solid transparent;border-right:10px solid transparent;border-radius:50px;content:'';top:-20px;left:-20px;-webkit-animation:preloader_5_after 1.5s infinite linear;-moz-animation:preloader_5_after 1.5s infinite linear;-ms-animation:preloader_5_after 1.5s infinite linear;animation:preloader_5_after 1.5s infinite linear;}
@-webkit-keyframes preloader_5{0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(180deg);background:#2ecc71;}
100%{-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes preloader_5_after{0%{border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50%{border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100%{border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
@-moz-keyframes preloader_5{0%{-moz-transform:rotate(0deg);}
50%{-moz-transform:rotate(180deg);background:#2ecc71;}
100%{-moz-transform:rotate(360deg);}
}
@-moz-keyframes preloader_5_after{0%{border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50%{border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100%{border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
@-ms-keyframes preloader_5{0%{-ms-transform:rotate(0deg);}
50%{-ms-transform:rotate(180deg);background:#2ecc71;}
100%{-ms-transform:rotate(360deg);}
}
@-ms-keyframes preloader_5_after{0%{border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50%{border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100%{border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
@keyframes preloader_5{0%{transform:rotate(0deg);}
50%{transform:rotate(180deg);background:#2ecc71;}
100%{transform:rotate(360deg);}
}
@keyframes preloader_5_after{0%{border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50%{border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100%{border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
/******************* PRELOADER 6 *****************************************************/
#preloader6{position:relative;width:42px;height:42px;-webkit-animation:preloader_6 5s infinite linear;-moz-animation:preloader_6 5s infinite linear;-ms-animation:preloader_6 5s infinite linear;animation:preloader_6 5s infinite linear;}
#preloader6 span{width:20px;height:20px;position:absolute;background:red;display:block;-webkit-animation:preloader_6_span 1s infinite linear;-moz-animation:preloader_6_span 1s infinite linear;-ms-animation:preloader_6_span 1s infinite linear;animation:preloader_6_span 1s infinite linear;}
#preloader6 span:nth-child(1){background:#2ecc71;}
#preloader6 span:nth-child(2){left:22px;background:#9b59b6;-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-ms-animation-delay:.2s;animation-delay:.2s;}
#preloader6 span:nth-child(3){top:22px;background:#3498db;-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-ms-animation-delay:.4s;animation-delay:.4s;}
#preloader6 span:nth-child(4){top:22px;left:22px;background:#f1c40f;-webkit-animation-delay:.6s;-moz-animation-delay:.6s;-ms-animation-delay:.6s;animation-delay:.6s;}
@-webkit-keyframes preloader_6{from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes preloader_6_span{0%{-webkit-transform:scale(1);}
50%{-webkit-transform:scale(0.5);}
100%{-webkit-transform:scale(1);}
}
@-moz-keyframes preloader_6{from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-moz-keyframes preloader_6_span{0%{-moz-transform:scale(1);}
50%{-moz-transform:scale(0.5);}
100%{-moz-transform:scale(1);}
}
@-ms-keyframes preloader_6{from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
@-ms-keyframes preloader_6_span{0%{-ms-transform:scale(1);}
50%{-ms-transform:scale(0.5);}
100%{-ms-transform:scale(1);}
}
@-ms-keyframes preloader_6{from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
@keyframes preloader_6_span{0%{transform:scale(1);}
50%{transform:scale(0.5);}
100%{transform:scale(1);}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
36.21 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
36.21 KB
立即下载
廖枝
了解
打赏作者 鼓励作者
Html CSS3特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章