久久精品国产一区二区电影,久久精品国产亚洲av瑜伽,精品无人区一码卡二卡三,久草热8精品视频在线观看 ,久久99精品久久久久麻豆

如何運(yùn)用CSS3輕松實(shí)現(xiàn)H5頁面里的飛行動畫

隨著h5頁面的宣傳優(yōu)勢，越來越的企業(yè)做活動開始追求移動端的展示效果

像下圖這樣一個h5頁面首屏，我們?nèi)绻o元素添加了動畫之后，看上去是不是活躍了許多

圖片

接下來我們就開始教大家如何用css3實(shí)現(xiàn)這樣的h5動畫頁面效果

首先建立文件之后

給背景來一個青藍(lán)色的天空

這里如圖所示

直接給body設(shè)置一個背景顏色即可

再插入一張plane的飛機(jī)圖片

這樣，準(zhǔn)備工作就完成了

接下來，飛機(jī)默認(rèn)位置是頂著坐上角的

這樣令人很不舒服

咱們可以給他一個postion的定位

放置到一個自己覺得舒服的地方

代碼如圖所示

好了，可以開始制作動畫的代碼了

css3提供了兩種動畫形式的代碼

其中之一是animation

代碼如圖所示

fei——這個動畫的名字

2s——這個動畫的時長

infinite，linear 這個，這個自己去百度翻譯就好了

自己動手，豐衣足食

剛才的animation只是告訴電腦

我們需要來一個叫做“fei”的動畫

至于這個“fei”的動畫

到底怎么個動法

并沒有告訴電腦

接下來的代碼

是書寫animation動畫的標(biāo)準(zhǔn)格式

如圖所示

0%是指動畫一開始是什么狀態(tài)

100%那當(dāng)然是指動畫結(jié)束時候的狀態(tài)

come on

假設(shè)我們想要飛機(jī)上下飛

那么需要輸入transform這個代碼來指定飛機(jī)要變了

冒號后面的意思是指

要移動Y軸移動變化

單位是30個像素

好了，做到這里

就可以預(yù)覽到飛機(jī)可以飛了

等會，看起來是不是有點(diǎn)傻

從下往上飛，然后循環(huán)？

不對啊，我們希望看上去

應(yīng)該是，上下上下這樣循環(huán)??！

是不是很多人想到了

只要加入中間那個50%的代碼

小修改一下參數(shù)就可以了

好了，留給大家一些思考題

如果要讓飛機(jī)斜著飛下來那應(yīng)該怎么辦呢

或者說，一邊上下顛簸，一邊往左邊飛呢

還有，如果我希望有個地球的圖片，在那自轉(zhuǎn)又該怎么辦呢

本文內(nèi)容來自互聯(lián)網(wǎng)，如果侵犯了您的權(quán)益，請聯(lián)系管理員立即刪除（附上內(nèi)容地址）