在網(wǎng)頁設(shè)計中,動畫效果是不可或缺的元素之一。而有些動畫效果需要一直保持循環(huán)播放,直到用戶關(guān)閉頁面。那么,在CSS中,如何實現(xiàn)永久動畫呢?
/* 定義動畫的關(guān)鍵幀 */ @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } /* 設(shè)置動畫播放的元素 */ div { animation: rotate 2s linear infinite; }
以上代碼實現(xiàn)了通過CSS定義一個永久旋轉(zhuǎn)的動畫。在代碼中,我們首先定義了一個名為“rotate”的動畫關(guān)鍵幀。在關(guān)鍵幀中,我們定義了動畫在0%和100%時的狀態(tài),也就是動畫開始和結(jié)束時的狀態(tài)。在本例中,我們定義了一個旋轉(zhuǎn)的狀態(tài),從0度旋轉(zhuǎn)到360度。
接著,我們設(shè)置需要播放動畫的元素div。在div的樣式表中,我們使用animation屬性,將名為“rotate”的動畫應(yīng)用在div上,設(shè)置為2秒播放一次,使用線性的緩動效果,無限循環(huán)播放。
另外,對于其他需要永久播放的動畫,我們也可以仿照以上方式定義關(guān)鍵幀,然后將其應(yīng)用在需要播放動畫的元素上,來實現(xiàn)各種形式的永久動畫。