CSS旋轉(zhuǎn)動(dòng)畫(huà)效果是學(xué)習(xí)CSS動(dòng)畫(huà)的重要一步，基于CSS3動(dòng)畫(huà)來(lái)實(shí)現(xiàn)，可以讓網(wǎng)站更加豐富多彩并吸引顧客目光。接下來(lái)我們將詳細(xì)的介紹CSS旋轉(zhuǎn)動(dòng)畫(huà)效果的實(shí)現(xiàn)方式。

.rotate {
animation: rotating 3s linear infinite;
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

以上代碼是實(shí)現(xiàn)一個(gè)基本的CSS旋轉(zhuǎn)動(dòng)畫(huà)效果，其中的.rotate是對(duì)于需要應(yīng)用動(dòng)畫(huà)的CSS元素的類名。animation: rotating 3s linear infinite;表示使用名稱為rotating的關(guān)鍵幀動(dòng)畫(huà)，duration為3s，緩動(dòng)函數(shù)為“l(fā)inear”，不斷重復(fù)。@keyframes用于確定從第一個(gè)樣式代碼中的開(kāi)始狀態(tài)(“from”)到最后一個(gè)樣式代碼的結(jié)束狀態(tài)(“to”)的整個(gè)動(dòng)畫(huà)時(shí)間間隔內(nèi)動(dòng)畫(huà)序列的中間階段。transform: rotate()屬性使元素繞Z軸旋轉(zhuǎn)多少度。

接下來(lái)我們來(lái)擴(kuò)展以上代碼，使其更加的具有實(shí)用性和漂亮性。

.rotate {
animation: rotating 2s ease-out infinite; 
border: 4px solid #5C3D00; 
border-right-color: transparent; 
border-radius: 100%; 
height: 50px; 
width: 50px; 
}
@keyframes rotating {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}

擴(kuò)展代碼增加了旋轉(zhuǎn)元素的邊框，設(shè)置了圓形邊框，使其具有更加炫酷的視覺(jué)效果，同時(shí)設(shè)置height: 50px; width: 50px;屬性使其成為一個(gè)等高等寬的正方形。逐幀動(dòng)畫(huà)有了不同的變化，使得整個(gè)旋轉(zhuǎn)更加具體，時(shí)間為2秒，緩動(dòng)函數(shù)為“ease-out”表示旋轉(zhuǎn)越來(lái)越緩，更加流暢自然，infinite表示旋轉(zhuǎn)無(wú)限。

通過(guò)以上的學(xué)習(xí)，CSS旋轉(zhuǎn)動(dòng)畫(huà)效果在網(wǎng)頁(yè)制作中也已經(jīng)得到了廣泛的應(yīng)用，我們?cè)趯?shí)現(xiàn)過(guò)程中可以根據(jù)實(shí)際需求進(jìn)行代碼的靈活變化。相信它一定會(huì)為我們的網(wǎng)站及廣告產(chǎn)品增色不少。