1.先瞧瞧效果：
2.代碼是這樣的：
<img src="images/circle.png" alt="" id="circle"/>
@mixin ani-btnRotate{
@keyframes btnRotate{
from{transform: rotateZ(0);}
to{transform: rotateZ(360deg);}
}
}
@include ani-btnRotate;
#circle{
position: absolute;
left: 50%;
width: REM(338);
height: REM(338);
margin-top: REM(200);
margin-left: REM(-338/2);
transform-origin: center center ;
animation: btnRotate 1s 1s linear forwards;
}
用到的圖片是這個(gè)：（就是白色轉(zhuǎn)動(dòng)的那個(gè)圖片）
總結(jié)
以上所述是小編給大家介紹的html5實(shí)現(xiàn)圖片轉(zhuǎn)圈的動(dòng)畫效果——讓頁(yè)面動(dòng)起來(lái)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
標(biāo)簽：咸寧 南京 十堰 酒泉 廣西 佳木斯 西寧 淮安
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《html5實(shí)現(xiàn)圖片轉(zhuǎn)圈的動(dòng)畫效果——讓頁(yè)面動(dòng)起來(lái)》，本文關(guān)鍵詞 html5,實(shí)現(xiàn),圖片,轉(zhuǎn)圈,的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
