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

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

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

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