CSS可以幫助我們實(shí)現(xiàn)很多有趣的效果,比如旋轉(zhuǎn)幾圈。下面就來(lái)看一看如何使用CSS實(shí)現(xiàn)旋轉(zhuǎn)幾圈吧。
.rotate { -webkit-animation: rotate 4s linear infinite; animation: rotate 4s linear infinite; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(720deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } }
上面的代碼中,我們定義了一個(gè)名為.rotate的class,其使用了CSS的animation屬性,來(lái)實(shí)現(xiàn)旋轉(zhuǎn)的動(dòng)畫效果。animation屬性需要設(shè)置四個(gè)值,分別是動(dòng)畫的名稱、動(dòng)畫的時(shí)長(zhǎng)、動(dòng)畫的播放方式和動(dòng)畫的循環(huán)次數(shù)。
接下來(lái),我們使用@keyframes(或者@-webkit-keyframes)來(lái)定義旋轉(zhuǎn)動(dòng)畫的細(xì)節(jié)。在這個(gè)例子中,我們定義了從0%到100%的動(dòng)畫過(guò)程,將元素從0度旋轉(zhuǎn)到720度,也就是旋轉(zhuǎn)了兩圈。
最后,我們將定義好的.rotate class應(yīng)用到需要旋轉(zhuǎn)的元素上,就可以看到元素不斷旋轉(zhuǎn)兩圈的效果了。