溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗證碼

其他方式登錄

點擊登錄注冊即表示同意《億速云用戶服務條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點擊重新獲取二維碼

css3怎么制作圓形旋轉動畫

發(fā)布時間：2022-02-24 14:38:12 來源：億速云閱讀：192 作者：小新欄目：web開發(fā)

這篇文章主要介紹了css3怎么制作圓形旋轉動畫，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　使用css3制作旋轉動畫的步驟

　　步驟一：畫出8個圖標設置成4個div

　　<divclass="out_circle">

　　<divclass="slide"></div>

　　<divclass="nav_circler1">

　　<divclass="img_topimg">

　　<imgsrc="images/menu.png">

　　<ahref="#">產(chǎn)品中心</a>

　　</div>

　　<divclass="img_bottomimg">

　　<imgsrc="images/menu_01.png">

　　<ahref="#">官方網(wǎng)站</a>

　　</div>

　　</div>

　　<divclass="nav_circler2">

　　<divclass="img_topimg">

　　<imgsrc="images/menu_02.png">

　　<ahref="#">代理查詢</a>

　　</div>

　　<divclass="img_bottomimg">

　　<imgsrc="images/menu_03.png">

　　<ahref="#">后臺登錄</a>

　　</div>

　　</div>

　　<divclass="nav_circler3">

　　<divclass="img_topimg">

　　<imgsrc="images/menu_04.png">

　　<ahref="#">公司資質</a>

　　</div>

　　<divclass="img_bottomimg">

　　<imgsrc="images/menu_05.png">

　　<ahref="#">質檢報告</a>

　　</div>

　　</div>

　　<divclass="nav_circler4">

　　<divclass="img_topimg">

　　<imgsrc="images/menu_06.png">

　　<ahref="#">代理登錄</a>

　　</div>

　　<divclass="img_bottomimg">

　　<imgsrc="images/menu_07.png">

　　<ahref="#">代理授權</a>

　　</div>

　　</div>

　　</div>

　　步驟二：使用css3布局

　　.out_circle{

　　width:440px;

　　height:440px;

　　border:1pxsolid;

　　border-radius:50%;

　　margin:30pxauto0auto;

　　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_topimg,.img_bottomimg{

　　width:77px;

　　height:77px;

　　}

　　.img_top,.img_bottom{

　　position:relative;

　　z-index:1;

　　}

　　.nav_circle.imga{

　　position:absolute;

　　top:10px;

　　left:94px;

　　width:52px;

　　}

　　.r1{

　　transform:rotate(0deg)skew(0deg)scale(1);

　　-ms-transform:rotate(0deg)skew(0deg)scale(1);/*IE9*/

　　-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:rotate10slinearinfinite;

　　-webkit-animation:rotate10slinearinfinite;

　　-moz-animation:rotate10slinearinfinite;

　　-o-animation:rotate10slinearinfinite;

　　}

　　.r1.img{

　　transform:rotate(0deg)skew(0deg)scale(1);

　　-ms-transform:rotate(0deg)skew(0deg)scale(1);/*IE9*/

　　-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_c110slinearinfinite;

　　-webkit-animation:rotate_c110slinearinfinite;

　　}

　　.r2{

　　transform:rotate(45deg)skew(0deg)scale(1);

　　-ms-transform:rotate(45deg)skew(0deg)scale(1);/*IE9*/

　　-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:rotatef10slinearinfinite;

　　-webkit-animation:rotatef10slinearinfinite;

　　-moz-animation:rotatef10slinearinfinite;

　　-o-animation:rotatef10slinearinfinite;

　　}

　　.r2.img{

　　transform:rotate(-45deg)skew(0deg)scale(1);

　　-ms-transform:rotate(-45deg)skew(0deg)scale(1);/*IE9*/

　　-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_c210slinearinfinite;

　　-webkit-animation:rotate_c210slinearinfinite;

　　}

　　.r3{

　　transform:rotate(90deg)skew(0deg)scale(1);

　　-ms-transform:rotate(90deg)skew(0deg)scale(1);/*IE9*/

　　-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:rotates10slinearinfinite;

　　-webkit-animation:rotates10slinearinfinite;

　　-moz-animation:rotates10slinearinfinite;

　　-o-animation:rotates10slinearinfinite;

　　}

　　.r3.img{

　　transform:rotate(-90deg)skew(0deg)scale(1);

　　-ms-transform:rotate(-90deg)skew(0deg)scale(1);/*IE9*/

　　-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_c310slinearinfinite;

　　-webkit-animation:rotate_c310slinearinfinite;

　　}

　　.r4{

　　transform:rotate(135deg)skew(0deg)scale(1);

　　-ms-transform:rotate(135deg)skew(0deg)scale(1);/*IE9*/

　　-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:rotatet20slinearinfinite;

　　-webkit-animation:rotatet10slinearinfinite;

　　-moz-animation:rotatet10slinearinfinite;

　　-o-animation:rotatet10slinearinfinite;

　　}

　　.r4.img{

　　transform:rotate(-135deg)skew(0deg)scale(1);

　　-ms-transform:rotate(-135deg)skew(0deg)scale(1);/*IE9*/

　　-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_c410slinearinfinite;

　　-webkit-animation:rotate_c410slinearinfinite;

　　}

　　步驟三：為每個div創(chuàng)建動畫

　　第一個div

　　@keyframesrotate{

　　0%{

　　transform:rotate(0deg)skew(0deg)scale(1);

　　-ms-transform:rotate(0deg)skew(0deg)scale(1);/*IE9*/

　　-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);/*IE9*/

　　-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

　　@keyframesrotatef{

　　0%{

　　transform:rotate(45deg)skew(0deg)scale(1);

　　-ms-transform:rotate(45deg)skew(0deg)scale(1);/*IE9*/

　　-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);/*IE9*/

　　-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

　　@keyframesrotates{

　　0%{

　　transform:rotate(90deg)skew(0deg)scale(1);

　　-ms-transform:rotate(90deg)skew(0deg)scale(1);/*IE9*/

　　-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);/*IE9*/

　　-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

　　@keyframesrotatet{

　　0%{

　　transform:rotate(135deg)skew(0deg)scale(1);

　　-ms-transform:rotate(135deg)skew(0deg)scale(1);/*IE9*/

　　-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);/*IE9*/

　　-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的旋轉屬性并不是所有瀏覽器都可以兼容的，所以在創(chuàng)建完之后要給相應的類添加動畫名。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css3怎么制作圓形旋轉動畫”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!

向AI問一下細節(jié)

推薦閱讀：

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。

上一篇新聞：
css3怎么實現(xiàn)圖片的簡單陰影效果
下一篇新聞：
CSS3怎么實現(xiàn)文字顏色的漸變

猜你喜歡

AI
助
手

產(chǎn)品服務

地區(qū)劃分

專題活動

幫助支持

關于我們

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關注億速云

億速云公眾號

手機網(wǎng)站二維碼