CSS旋轉(zhuǎn)動畫是一種常見的Web編程效果,它能夠通過CSS代碼來實現(xiàn)圖片、文本等元素旋轉(zhuǎn)的效果。我們可以使用以下CSS代碼實現(xiàn)旋轉(zhuǎn)動畫:
.rotate { -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; /* Safari 4.0 - 8.0 */ /* Chrome 1.0 - 43.0 */ /* Opera 15.0 - 27.0 */ /* Standard syntax */ } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
注:此為兼容不同瀏覽器的代碼,可以針對不同的瀏覽器做調(diào)整。
上面的CSS代碼中,我們使用了@keyframes聲明了一個名為spin的動畫,其中0%表示動畫的開始狀態(tài),100%表示動畫的結(jié)束狀態(tài)。我們使用transform屬性來改變元素的旋轉(zhuǎn)角度,同時使用animation屬性來指定動畫的時間和重復(fù)次數(shù)。
如果我們想要通過CSS代碼來進(jìn)行元素的旋轉(zhuǎn)呢?我們可以通過以下代碼來實現(xiàn):
.rotate { transform: rotate(45deg); }
上面的代碼意義是將.rotate元素旋轉(zhuǎn)45度,通過這一簡單的CSS代碼,我們就可以實現(xiàn)元素的旋轉(zhuǎn)效果。