应用css3制作loading效果

参考秒味课堂代码发出来备忘

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
	<div class="loading">
		<div class="load">
			<div class="layer"></div>
			<div class="layer2"></div>
			<div class="text">25%</div>
		</div>
		<div class="loadshadow"></div>
	</div>
</body>
</html>

css3

body {position: relative;}
@keyframes shadow
{
	0%
	{
		-webkit-transform: scale(0.8); opacity: 0.5;
		   -moz-transform: scale(0.8); opacity: 0.5;
		    -ms-transform: scale(0.8); opacity: 0.5;
		     -o-transform: scale(0.8); opacity: 0.5;
		        transform: scale(0.8); opacity: 0.5;
	}
	100%
	{
		-webkit-transform: scale(1); opacity: 1;
		   -moz-transform: scale(1); opacity: 1;
		    -ms-transform: scale(1); opacity: 1;
		     -o-transform: scale(1); opacity: 1;
		        transform: scale(1); opacity: 1;
	}
}
@keyframes move1
{
	0%
	{
		-webkit-transform: translateY(7px);
		   -moz-transform: translateY(7px);
		    -ms-transform: translateY(7px);
		     -o-transform: translateY(7px);
		        transform: translateY(7px);
	}
	100%
	{
		-webkit-transform: translateY(0px);
		   -moz-transform: translateY(0px);
		    -ms-transform: translateY(0px);
		     -o-transform: translateY(0px);
		        transform: translateY(0px);
	}
}
@keyframes move2 
{
	0% 
	{
		transform:rotate(0deg);
	}
	100% 
	{
		transform: rotate(-360deg);
	}
} 
@keyframes move3
{
	0%
	{
		transform: rotate(0deg);
	}
	100% 
	{
		transform: rotate(360deg);
	}
}

.loading {  120px; height: 140px; position: fixed; left:calc(50% - 60px); top:calc(50% - 70px);}
.load { 120px; height: 100px; background: url(./image/loading3.png); position: absolute;left: 0px; top: 0px; -webkit-animation: .5s move1 infinite alternate linear; animation: .5s move1 infinite alternate linear;}
.layer {120px; height:100px; background: url(./image/loading4.png) no-repeat; position: absolute; top: 0px; left: 0px; animation: 1.2s move2 infinite linear;}
.layer2 { 120px; height: 100px; background: url(./image/loading5.png) no-repeat; position: absolute; top:0px; left: 0px; animation:1.2s move3 infinite linear;}
.text {  120px; height: 100px; position: absolute; top: 0px; left: 0px; text-align: center; line-height: 100px; font:bold 16px/100px bold; color:#f9725c;}
.loadshadow{  100px; height: 20px; margin:0 auto; background:-webkit-radial-gradient(contain,rgba(0,0,0,0.7),rgba(0,0,0,0)); position: absolute; left:10px; bottom:0px;-webkit-animation: .5s shadow infinite alternate linear;}