CSS動(dòng)畫是一種通過樣式表定義動(dòng)態(tài)效果的方法。它通過指定過渡、旋轉(zhuǎn)、轉(zhuǎn)換和動(dòng)態(tài)屬性更改等操作來制作動(dòng)畫效果。
/* 指定使用css實(shí)現(xiàn)動(dòng)畫 */ animation: myanimation 3s infinite; /* 定義動(dòng)畫效果 */ @keyframes myanimation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
在上面的代碼中,我們使用animation屬性來指定使用CSS動(dòng)畫,并將其命名為myanimation。我們使用3秒鐘的duration(時(shí)間)和infinite的iteration count(迭代計(jì)數(shù)器)來設(shè)定CSS動(dòng)畫的動(dòng)畫效果。同時(shí),我們還用了@keyframes來定義動(dòng)畫的具體效果。
在@keyframes中指定了動(dòng)畫從0%到100%的過程中,將元素旋轉(zhuǎn)360度,實(shí)現(xiàn)了旋轉(zhuǎn)效果的動(dòng)畫。
通過這種方式,我們可以使用CSS來制作各種各樣的動(dòng)畫效果,不僅可以優(yōu)化網(wǎng)頁的視覺效果,還可以提高網(wǎng)站的用戶體驗(yàn)。