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

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

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

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