CSS螺旋動(dòng)畫是一種獨(dú)特的動(dòng)畫效果，能夠?yàn)榫W(wǎng)頁(yè)添加時(shí)尚且吸引人的效果。本文將為您介紹如何使用 CSS 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的螺旋動(dòng)畫。

/* 定義元素樣式 */
.spinning {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #000;
position: relative;
}
/* 定義關(guān)鍵幀 */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
/* 定義同時(shí)更改元素的多個(gè)屬性 */
50% {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(180deg);
border-color: #ff0000;
box-shadow: 0 0 10px #ff0000;
}
}
/* 使用關(guān)鍵幀實(shí)現(xiàn)螺旋動(dòng)畫 */
.spinning {
animation: spin 2s linear infinite;
}

這段代碼實(shí)現(xiàn)了一個(gè)名為 "spinning" 的元素，它擁有圓形邊界、旋轉(zhuǎn)動(dòng)畫以及特殊樣式，使它在動(dòng)畫過程中呈現(xiàn)出螺旋形狀。首先，我們定義了一個(gè) CSS 類名 "spinning"，并指定了元素的樣式。接下來，我們創(chuàng)建一個(gè)名為 "spin" 的關(guān)鍵幀，它在動(dòng)畫開始時(shí)旋轉(zhuǎn) 0 度，在動(dòng)畫結(jié)束時(shí)旋轉(zhuǎn) 360 度。在關(guān)鍵幀的 50% 處，同時(shí)更改元素的多個(gè)屬性，包括位置、邊框顏色和陰影效果。最后，我們應(yīng)用關(guān)鍵幀 "spin" 來觸發(fā)螺旋動(dòng)畫，讓 "spinning" 元素旋轉(zhuǎn)起來。這里，我們使用了 linear 緩動(dòng)函數(shù)來使動(dòng)畫勻速進(jìn)行，且無(wú)限重復(fù)。