css3指南针效果

css3的动画效果：animation实现指南针旋转，执行了两个动画：
1、从屏幕左边滚动出来
2、绕着中心旋转

效果图：

另外的三张图片

html

<div class="bodyBg"><img src="images/bg1.jpg"/></div>
<!--指南针-->
<div class="container">
	<div class="bdDiv">
    	<span class="span1">东</span>
        <span class="span2">南</span>
        <span class="span3">西</span>
        <span class="span4">北</span>
    	<div class="bgDiv"><img src="images/bg.png"/></div>
        <div class="zhizhen"><img src="images/zhizhen.png"/></div>
    </div>
</div>

css

@charset "utf-8";
/* CSS Document */
body{ margin:0; padding:0; overflow:hidden;}
.bodyBg{ position:fixed; left:0px; top:0px; width:100%; height:100%;}

.container{ width:400px; height:400px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-200px; border:1px dashed #fff; border-radius:50%; animation:run-inner0 5s;}
.bdDiv{ position:absolute; left:0px; top:0px; width:100%; height:100%; animation:run-inner 10s infinite 5s linear;}
.bgDiv{ position:absolute; left:50%; top:50%; margin-left:-165px; margin-top:-165px;}
.zhizhen{ position:absolute; left:50%; top:50%; margin-left:-12.5px; margin-top:-106.5px; animation:run-inner1 12s infinite .1s linear;}
.bdDiv span{ position:absolute; color:#fff; font-size:14px; font-weight:bold;}
.bdDiv .span1{ right:9px; top:195px;}
.bdDiv .span2{ bottom:9px; left:195px;}
.bdDiv .span3{ left:9px; top:195px;}
.bdDiv .span4{ top:9px; left:195px;}

@keyframes run-inner0{
 from{ left:-400px;}
 to{ left:50%; margin-left:-200px;}
 0%{ transform:rotate(0deg)}
 100%{ transform:rotate(360deg)}	
}

@keyframes run-inner {
0% {
transform:rotate(0deg)
}
25% {
transform:rotate(90deg)
}
50% {
transform:rotate(-90deg)
}
75% {
transform:rotate(90deg)
}
100% {
transform:rotate(0deg)
}
}

@keyframes run-inner1 {
0% {
transform:rotate(0deg)
}
25% {
transform:rotate(30deg)
}
50% {
transform:rotate(-30deg)
}
75% {
transform:rotate(30deg)
}
100% {
transform:rotate(0deg)
}
}

js (自行添加：jquery-1.11.1.min.js文件)
（注：另外我没做兼容）