CSS是網(wǎng)頁設(shè)計(jì)所必需的一種編程語言,它能為我們實(shí)現(xiàn)豐富的視覺效果。今天,我們來學(xué)習(xí)如何讓一個(gè)元素不停旋轉(zhuǎn)360度。
.rotate { animation: rotate 2s linear infinite; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
以上代碼中,我們定義了一個(gè)類名為rotate的樣式。該元素會(huì)持續(xù)旋轉(zhuǎn)2秒鐘,線性的運(yùn)動(dòng)軌跡,無限循環(huán)。在我們通過關(guān)鍵幀動(dòng)畫的方式來實(shí)現(xiàn)這樣的旋轉(zhuǎn)效果。我們先定義了兩個(gè)關(guān)鍵幀:0%的時(shí)候元素角度為0,100%的時(shí)候元素角度為360度。最后,在樣式中將關(guān)鍵幀應(yīng)用到元素上即可。
使用以上代碼,我們可以為網(wǎng)頁設(shè)計(jì)增加豐富多彩的動(dòng)態(tài)效果,讓網(wǎng)頁更加生動(dòng)、吸引人。學(xué)會(huì)這些常用的CSS技巧,對于網(wǎng)頁設(shè)計(jì)和前端開發(fā)人員來說都是非常重要的知識點(diǎn)。