基于純CSS3紙飛機炫酷動畫特效

　　Flyaway.css是一款使用純CSS3制作的炫酷紙飛機動畫特效。Flyout模式可以應用于登錄頁面，信息發送成功，如果填的信息有誤，可以使用Shake模式，代表信息輸入有誤。

該紙飛機可以是font awesome提供的飛機圖標，也可以是svg圖，利用jQuery添加相應屬性，會獲得相應的動畫效果。

　　使用方法

　　使用該紙飛機動畫特效需要在頁面中引入flyaway.min.css文件，如果需要動態的調用紙飛機的動畫，可以使用jQuery來動態的添加和移除相應的class類。

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

HTML結構

　　以使用font awesome字體圖標的飛機圖標為例，HTML結構如下：

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

CSS樣式

　　該紙飛機動畫的預置class類如下：

　　flyaway為基本屬性，一定要添加。在添加完在這個基本屬性后，再添加后續的class屬性，實現動畫效果。

Flyout模式：

　　pushOut：飛機被外力推出飛走。

　　popUp：飛機被彈射出去。

Shake模式

　　linearShake：飛機線型搖動。

　　rotateShake：飛機旋轉搖動。

　　其中，Flyout模式可以應用于登錄頁面，信息發送成功，如果填的信息有誤，可以使用Shake模式，代表信息輸入有誤。

JavaScript

你可以使用jQuery來觸發紙飛機的動畫，只需要在點擊按鈕或某類觸發事件時添加上面的相應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');
 });
});
});

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com