現在的css3真是強大，之前很多動畫都是用jq來實現，但是css3製作的動畫要比jq實現起來簡單很多，今天呢，我自己也寫了一個css旋轉動畫和大家分享。效果如下麵的圖片 思路：1.製作之前呢，我們先來整理一下思路，這個圓軸軌跡上一共有八個圓。 仔細看的話，你會發現一個規律，那就是一個月是360度的， ...
現在的css3真是強大，之前很多動畫都是用jq來實現，但是css3製作的動畫要比jq實現起來簡單很多，今天呢，我自己也寫了一個css旋轉動畫和大家分享。效果如下麵的圖片
思路：1.製作之前呢，我們先來整理一下思路，這個圓軸軌跡上一共有八個圓。
仔細看的話，你會發現一個規律，那就是一個月是360度的，裡面放了八個圓，也就是每個圓都是占了45度，然後平均的在圓軸上面分佈開來。有了這個發現之後，我們就開始想想該怎麼佈局好啦。下麵是我的佈局方式，可以給大家參考一下：
我是每兩個垂直對應的圓就放在同一個div中，八個圓的話，那就是四個div，讓div展示成上面的效果的話，需要用到css3的旋轉屬性。讓第一個div保持0deg不變，然後第二個div呢就旋轉45deg，以此類推，下一個div都要比上一個div多旋轉45deg，就出現了上面的這個佈局啦。我在這邊貼上代碼：
html代碼：
<div class="out_circle"> <div class="slide"></div> <div class="nav_circle r1"> <div class="img_top img"> <img src="images/menu.png"> <a href="#">產品中心</a> </div> <div class="img_bottom img" > <img src="images/menu_01.png"> <a href="#">官方網站</a> </div> </div> <div class="nav_circle r2"> <div class="img_top img"> <img src="images/menu_02.png"> <a href="#">代理查詢</a> </div> <div class="img_bottom img" > <img src="images/menu_03.png"> <a href="#">後臺登錄</a> </div> </div> <div class="nav_circle r3"> <div class="img_top img"> <img src="images/menu_04.png"> <a href="#">公司資質</a> </div> <div class="img_bottom img" > <img src="images/menu_05.png"> <a href="#">質檢報告</a> </div> </div> <div class="nav_circle r4"> <div class="img_top img"> <img src="images/menu_06.png"> <a href="#">代理登錄</a> </div> <div class="img_bottom img" > <img src="images/menu_07.png"> <a href="#">代理授權</a> </div> </div> </div>
css代碼：
.out_circle{ width:440px; height:440px; border:1px solid; border-radius:50%; margin:30px auto 0 auto; position: relative; } .nav_circle{ width:110px; height:440px; float:left; position:absolute; top:0; left:169px; text-align:center; } .img_top{ top:-27px; -webkit-transform: rotate(0deg); } .img_bottom{ top:316px; -webkit-transform: rotate(0deg); } .img_top img,.img_bottom img{ width:77px; height: 77px; } .img_top,.img_bottom{ position: relative; z-index:1; } .nav_circle .img a{ position: absolute; top:10px; left:94px; width: 52px; } .r1{ transform:rotate(0deg) skew(0deg) scale(1); -ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(0deg) skew(0deg) scale(1); animation: rotate 10s linear infinite; -webkit-animation:rotate 10s linear infinite; -moz-animation:rotate 10s linear infinite; -o-animation:rotate 10s linear infinite; } .r1 .img{ transform:rotate(0deg) skew(0deg) scale(1); -ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(0deg) skew(0deg) scale(1); animation:rotate_c1 10s linear infinite; -webkit-animation:rotate_c1 10s linear infinite; } .r2{ transform:rotate(45deg) skew(0deg) scale(1); -ms-transform:rotate(45deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(45deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(45deg) skew(0deg) scale(1); animation: rotatef 10s linear infinite; -webkit-animation:rotatef 10s linear infinite; -moz-animation:rotatef 10s linear infinite; -o-animation:rotatef 10s linear infinite; } .r2 .img { transform:rotate(-45deg) skew(0deg) scale(1); -ms-transform:rotate(-45deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(-45deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(-45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(-45deg) skew(0deg) scale(1); animation:rotate_c2 10s linear infinite; -webkit-animation:rotate_c2 10s linear infinite; } .r3 { transform:rotate(90deg) skew(0deg) scale(1); -ms-transform:rotate(90deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(90deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(90deg) skew(0deg) scale(1); animation: rotates 10s linear infinite; -webkit-animation:rotates 10s linear infinite; -moz-animation:rotates 10s linear infinite; -o-animation:rotates 10s linear infinite; } .r3 .img{ transform:rotate(-90deg) skew(0deg) scale(1); -ms-transform:rotate(-90deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(-90deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(-90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(-90deg) skew(0deg) scale(1); animation:rotate_c3 10s linear infinite; -webkit-animation:rotate_c3 10s linear infinite; } .r4{ transform:rotate(135deg) skew(0deg) scale(1); -ms-transform:rotate(135deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(135deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(135deg) skew(0deg) scale(1); animation: rotatet 20s linear infinite; -webkit-animation:rotatet 10s linear infinite; -moz-animation:rotatet 10s linear infinite; -o-animation:rotatet 10s linear infinite; } .r4 .img{ transform:rotate(-135deg) skew(0deg) scale(1); -ms-transform:rotate(-135deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(-135deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(-135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(-135deg) skew(0deg) scale(1); animation:rotate_c4 10s linear infinite; -webkit-animation:rotate_c4 10s linear infinite; }
布好局之後呢，最大的亮點來了，沒錯，就是讓它動起來。接下來就是要解決旋轉的問題了，在創建動畫的時候，我們要考慮一下。就是它旋轉是按著圓軸來旋轉的，就是說它轉一圈之後，還是會回到它原來的位置上，這個相信大家都能理解。所以每個圓都要單獨創建動畫：
css3動畫的代碼：
第一個div的動畫：
@keyframes rotate{ 0%{ transform:rotate(0deg) skew(0deg) scale(1); -ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(0deg) skew(0deg) scale(1); } 100%{ transform:rotate(360deg) skew(0deg) scale(1); -ms-transform:rotate(360deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(360deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(360deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(360deg) skew(0deg) scale(1); } }
第二個div的動畫：
@keyframes rotatef{ 0%{ transform:rotate(45deg) skew(0deg) scale(1); -ms-transform:rotate(45deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(45deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(45deg) skew(0deg) scale(1); } 100%{ transform:rotate(405deg) skew(0deg) scale(1); -ms-transform:rotate(405deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(405deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(405deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(405deg) skew(0deg) scale(1); } }
第三個div的動畫：
@keyframes rotates{ 0%{ transform:rotate(90deg) skew(0deg) scale(1); -ms-transform:rotate(90deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(90deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(90deg) skew(0deg) scale(1); } 100%{ transform:rotate(450deg) skew(0deg) scale(1); -ms-transform:rotate(450deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(450deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(450deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(450deg) skew(0deg) scale(1); } }
第四個div的動畫：
@keyframes rotatet{ 0%{ transform:rotate(135deg) skew(0deg) scale(1); -ms-transform:rotate(135deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(135deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(135deg) skew(0deg) scale(1); } 100%{ transform:rotate(495deg) skew(0deg) scale(1); -ms-transform:rotate(495deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(495deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(495deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(495deg) skew(0deg) scale(1); } }
相容各種瀏覽器內核的寫法我這邊沒寫，你們自己添加首碼就可以了。因為加上去代碼會太長，所以這邊就不加了，望能理解。
這邊加上之後，轉動是可以轉動了，但是會出現一個問題，如圖所示：
要解決這個bug的話，就需要div裡面的子元素也跟著一起轉動也行，怎麼轉動呢？可能是要和轉動的父元素的轉動方向相反才能維持正常狀態啦。下麵呢，我就直接貼上子元素轉動的代碼吧
@keyframes rotate_c1{ 0%{ transform:rotate(0deg) skew(0deg) scale(1); -ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(0deg) skew(0deg) scale(1); } 100%{ transform:rotate(-360deg) skew(0deg) scale(1); -ms-transform:rotate(-360deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(-360deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(-360deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(-360deg) skew(0deg) scale(1); } } @keyframes rotate_c2{ 0%{ transform:rotate(-45deg) skew(0deg) scale(1); -ms-transform:rotate(-45deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(-45deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(-45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(-45deg) skew(0deg) scale(1); } 100%{ transform:rotate(-405deg) skew(0deg) scale(1); -ms-transform:rotate(-405deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(-405deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(-405deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(-405deg) skew(0deg) scale(1); } } @keyframes rotate_c3{ 0%{ transform:rotate(-90deg) skew(0deg) scale(1); -ms-transform:rotate(-90deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(-90deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(-90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(-90deg) skew(0deg) scale(1); } 100%{ transform:rotate(-450deg) skew(0deg) scale(1); -ms-transform:rotate(-450deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(-450deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(-450deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(-450deg) skew(0deg) scale(1); } } @keyframes rotate_c4{ 0%{ transform:rotate(-135deg) skew(0deg) scale(1); -ms-transform:rotate(-135deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(-135deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(-135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(-135deg) skew(0deg) scale(1); } 100%{ transform:rotate(-495deg) skew(0deg) scale(1); -ms-transform:rotate(-495deg) skew(0deg) scale(1); /* IE 9 */ -moz-transform:rotate(-495deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(-495deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */ -o-transform:rotate(-495deg) skew(0deg) scale(1); } }
註意：創建好動畫之後，別忘了給相應的類添加動畫名，不然是轉動不起來的，因為css3不是所有瀏覽器都完全支持的，所以一定要記得添加內核首碼名
好啦，旋轉動畫現在就完成了，其實只要思路對了，實現起來那是非常簡單的。用其他佈局方法也是可以實現的。如果你們有時間的，也可以自己去嘗試一下
