隨著h5頁(yè)面的宣傳優(yōu)勢(shì)，越來(lái)越的企業(yè)做活動(dòng)開(kāi)始追求移動(dòng)端的展示效果，接下來(lái)我們就開(kāi)始教大家如何用css3實(shí)現(xiàn)這樣的h5動(dòng)畫(huà)頁(yè)面效果。

        首先建立文件之后，給背景來(lái)一個(gè)青藍(lán)色的天空，直接給body設(shè)置一個(gè)背景顏色即可，再插入一張plane的飛機(jī)圖片，這樣，準(zhǔn)備工作就完成了；

       接下來(lái)，飛機(jī)默認(rèn)位置是頂著坐上角的，這樣令人很不舒服，咱們可以給他一個(gè)postion的定位，放置到一個(gè)自己覺(jué)得舒服的地方，好了，可以開(kāi)始制作動(dòng)畫(huà)的代碼了，css3提供了兩種動(dòng)畫(huà)形式的代碼，其中之一是animation，fei——這個(gè)動(dòng)畫(huà)的名字，2s——這個(gè)動(dòng)畫(huà)的時(shí)長(zhǎng)，接下來(lái)的代碼，是書(shū)寫(xiě)animation動(dòng)畫(huà)的標(biāo)準(zhǔn)格式，0%是指動(dòng)畫(huà)一開(kāi)始是什么狀態(tài)，100%那當(dāng)然是指動(dòng)畫(huà)結(jié)束時(shí)候的狀態(tài)。

假設(shè)我們想要飛機(jī)上下飛，那么需要輸入transform這個(gè)代碼來(lái)指定飛機(jī)要變了，冒號(hào)后面的意思是指要移動(dòng)Y軸移動(dòng)變化，單位是30個(gè)像素，好了，做到這里，就可以預(yù)覽到飛機(jī)可以飛了，等會(huì)，看起來(lái)是不是有點(diǎn)傻，從下往上飛，然后循環(huán)？，不對(duì)啊，我們希望看上去，應(yīng)該是，上下上下這樣循環(huán)啊！是不是很多人想到了，只要加入中間那個(gè)50%的代碼，小修改一下參數(shù)就可以了。