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文件)
（注：另外我沒做兼容）

總結

以上是生活随笔為你收集整理的css3指南针效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。