Flyaway.css是一款使用純CSS3制作的炫酷紙飛機(jī)動(dòng)畫(huà)特效。Flyout模式可以應(yīng)用于登錄頁(yè)面，信息發(fā)送成功，如果填的信息有誤，可以使用Shake模式，代表信息輸入有誤。

該紙飛機(jī)可以是font awesome提供的飛機(jī)圖標(biāo)，也可以是svg圖，利用jQuery添加相應(yīng)屬性，會(huì)獲得相應(yīng)的動(dòng)畫(huà)效果。

　　使用方法

　　使用該紙飛機(jī)動(dòng)畫(huà)特效需要在頁(yè)面中引入flyaway.min.css文件，如果需要?jiǎng)討B(tài)的調(diào)用紙飛機(jī)的動(dòng)畫(huà)，可以使用jQuery來(lái)動(dòng)態(tài)的添加和移除相應(yīng)的class類。

<link rel="stylesheet" href="css/flyaway.min.css" />

HTML結(jié)構(gòu)

　　以使用font awesome字體圖標(biāo)的飛機(jī)圖標(biāo)為例，HTML結(jié)構(gòu)如下：

 <i id="demo" class="fa fa-paper-plane fa-3x"></i>

CSS樣式

　　該紙飛機(jī)動(dòng)畫(huà)的預(yù)置class類如下：

　　flyaway為基本屬性，一定要添加。在添加完在這個(gè)基本屬性后，再添加后續(xù)的class屬性，實(shí)現(xiàn)動(dòng)畫(huà)效果。

Flyout模式：

　　pushOut：飛機(jī)被外力推出飛走。

　　popUp：飛機(jī)被彈射出去。

Shake模式

　　linearShake：飛機(jī)線型搖動(dòng)。

　　rotateShake：飛機(jī)旋轉(zhuǎn)搖動(dòng)。

　　其中，F(xiàn)lyout模式可以應(yīng)用于登錄頁(yè)面，信息發(fā)送成功，如果填的信息有誤，可以使用Shake模式，代表信息輸入有誤。

JavaScript

你可以使用jQuery來(lái)觸發(fā)紙飛機(jī)的動(dòng)畫(huà)，只需要在點(diǎn)擊按鈕或某類觸發(fā)事件時(shí)添加上面的相應(yīng)class類即可。

$(document).ready(function() {
 $('.animate').click(function(e) {
 e.preventDefault();
 $('#demo').addClass('flyaway popUp')
 .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
 function() {
 $('#demo').removeClass('flyaway popUp');
 });
});
});

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com