复古的css3 loading动画

这是我在一个国外网站上看到的Loading动画效果。实现起来很简单，但是很有FEEL的样子，所以就贴出来分享分享。

*{ margin:0; padding:0;}
body{ background:url(images/body_bg.jpg);}
.loading,.circle_1,.circle_2,.circle_3{ width:220px; height:220px; position:absolute;}
.loading{ width:220px; height:220px; background:url(images/back.png) no-repeat; top:50%; left:50%; margin:-110px 0 0 -110px;}
.circle_1{ background:url(images/1.png) no-repeat;}
.circle_2{ background:url(images/2.png) no-repeat;}
.circle_3{ background:url(images/3.png) no-repeat;}

.clockwise{ -webkit-animation:clockwise 45s linear infinite; -moz-animation:clockwise 45s linear infinite;}
.counterclockwise{ -webkit-animation:counterclockwise 45s linear infinite; -moz-animation:clockwise 45s linear infinite;}

@-webkit-keyframes clockwise
{
	0% {-webkit-transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes counterclockwise
{
	0% {-webkit-transform:rotate(0deg);}
	100% {-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes clockwise
{
	0% {-webkit-transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes counterclockwise
{
	0% {-webkit-transform:rotate(0deg);}
	100% {-webkit-transform:rotate(-360deg);}
}

查看演示