一个用css3写的loading效果

　2012-05-20 22:35:27　来源：WEB开发网　　　

核心提示：css3很棒，很好玩，一个用css3写的loading效果，多些创意，效果就会大不一样一个用css3写的loading效果

css3很棒，很好玩，多些创意，效果就会大不一样
一个用css3写的loading效果，效果请见
http://lanxyou.info/demos/loading/demo.html

HTML代码

<div id="loading">
	<div class="loadingWrap">
		<span class="loadingLeft"></span>
		<span class="loadingRight"></span>
		<span class="loadingTop"></span>
		<span class="loadingBottom"></span>
	</div>
</div>

CSS代码

.loadingWrap{
	width:50px;
	height:50px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-25px;
	margin-top:-100px;
	-webkit-animation:loading 2s linear infinite;
	-moz-animation:loading 2s linear infinite;
	-webkit-transform-origin:center center;
	-moz-transform-origin:center center;
}
@-webkit-keyframes 'loading'{
	from{
		-webkit-transform:rotate(0);
	}
	to{
		-webkit-transform:rotate(360deg);
	}
}
@-moz-keyframes loading{
	from{
		-moz-transform:roate(0);
	}
	to{
		-moz-transform:rotate(360deg);
	}
}
	.loadingLeft,.loadingRight,.loadingTop,.loadingBottom{
		width:50px;
		height:50px;
		position:absolute;
		border-style:solid;

	}
	.loadingLeft{
		top:15px;
		left:10px;
		border-width:0 0 0 5px;
		border-radius:50% 0 0 50%;
		border-color:#223A63;
	}
	.loadingRight{
		bottom:15px;
		right:10px;
		border-width:0 5px 0 0;
		border-radius:0 50% 50% 0;
		border-color:#558985;
	}
	.loadingTop{
		top:10px;
		right:15px;
		border-width:5px 0 0 0;
		border-radius:50% 50% 0 0;
		border-color:#83ae89;
	}
	.loadingBottom{
		bottom:10px;
		left:15px;
		border-width:0 0 5px 0;
		border-radius:0 0 50% 50%;
		border-color:#ced6ad;
	}