CSS3是一種用于網(wǎng)頁(yè)設(shè)計(jì)的樣式表語(yǔ)言,它提供了許多強(qiáng)大的功能,比如間接三秒運(yùn)動(dòng)一次。這個(gè)功能可以使用@keyframes規(guī)則實(shí)現(xiàn)。
@keyframes my-animation { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(0deg); } } .my-element { animation: my-animation 3s infinite; }
上面的代碼中,我們定義了一個(gè)名為my-animation的動(dòng)畫,它在0%的時(shí)候?qū)⒃夭蛔鲎兓?0%的時(shí)候?qū)⒃匾灾行狞c(diǎn)旋轉(zhuǎn)180度,然后在100%的時(shí)候?qū)⒃鼗氐狡鹗嘉恢谩=又覀兘o元素添加了一個(gè).animation的類名,并通過(guò)animation屬性指定了使用my-animation這個(gè)動(dòng)畫,時(shí)間為3秒,實(shí)現(xiàn)無(wú)限循環(huán)。
這樣,我們就實(shí)現(xiàn)了一個(gè)間隔三秒運(yùn)動(dòng)一次的動(dòng)畫效果,讓你的網(wǎng)頁(yè)更加生動(dòng)有趣。要注意的是,不同的瀏覽器可能對(duì)@keyframes規(guī)則的支持程度不同,所以在使用這個(gè)功能時(shí)應(yīng)該進(jìn)行兼容性測(cè)試。