隨著h5頁面的宣傳優勢,越來越的企業做活動開始追求移動端的展示效果,接下來我們就開始教大家如何用css3實現這樣的h5動畫頁面效果。
首先建立文件之后,給背景來一個青藍色的天空,直接給body設置一個背景顏色即可,再插入一張plane的飛機圖片,這樣,準備工作就完成了;
接下來,飛機默認位置是頂著坐上角的,這樣令人很不舒服,咱們可以給他一個postion的定位,放置到一個自己覺得舒服的地方,好了,可以開始制作動畫的代碼了,css3提供了兩種動畫形式的代碼,其中之一是animation,fei——這個動畫的名字,2s——這個動畫的時長,接下來的代碼,是書寫animation動畫的標準格式,0%是指動畫一開始是什么狀態,100%那當然是指動畫結束時候的狀態。
假設我們想要飛機上下飛,那么需要輸入transform這個代碼來指定飛機要變了,冒號后面的意思是指要移動Y軸移動變化,單位是30個像素,好了,做到這里,就可以預覽到飛機可以飛了,等會,看起來是不是有點傻,從下往上飛,然后循環?,不對啊,我們希望看上去,應該是,上下上下這樣循環啊!是不是很多人想到了,只要加入中間那個50%的代碼,小修改一下參數就可以了。