HTML如何使用css完成動(dòng)畫(huà)效果？

css3可以完成許多令人驚艷的動(dòng)畫(huà)效果，對(duì)于css來(lái)說(shuō)變化是非常大的，我們?cè)趆tml中結(jié)合CSS技術(shù)就可以做出好看的動(dòng)畫(huà)效果，那么應(yīng)該如何寫(xiě)出這樣的效果呢？

首先寫(xiě)出一個(gè)div，指定一個(gè)class，然后再寫(xiě)出兩個(gè)i標(biāo)簽，作為我們動(dòng)畫(huà)的實(shí)體。

我們定義一下div的屬性，包括長(zhǎng)款，邊界和位置屬性。

使用為對(duì)象選擇器選擇兩個(gè)i標(biāo)簽，然后為它們寫(xiě)上靜態(tài)屬性，這里的屬性可以隨意調(diào)整，但是display模式一定要寫(xiě)，不然是看不見(jiàn)圖形的。

我寫(xiě)完的圖形樣子是這樣的。

接下來(lái)定義動(dòng)畫(huà)，anim1 anim2是動(dòng)畫(huà)名字，可以隨意起。里面的就是對(duì)應(yīng)進(jìn)度所改變的屬性。

在兩個(gè)i標(biāo)簽的屬性里調(diào)用動(dòng)畫(huà)，更后加上infinite循環(huán)就可以了。

此時(shí)打開(kāi)我們?cè)O(shè)計(jì)好的網(wǎng)頁(yè)，就可以看到圖形的動(dòng)態(tài)變化了~