基于纯CSS3纸飞机炫酷动画特效

　　简要教程

　　Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效。Flyout模式可以应用于登录页面，信息发送成功，如果填的信息有误，可以使用Shake模式，代表信息输入有误。

　　Flyaway.css的作者是進擊的燊，该纸飞机可以是font awesome提供的飞机图标，也可以是svg图，利用jQuery添加相应属性，会获得相应的动画效果。

查看演示　　下载插件

　　使用方法

　　使用该纸飞机动画特效需要在页面中引入flyaway.min.css文件，如果需要动态的调用纸飞机的动画，可以使用jQuery来动态的添加和移除相应的class类。

　　HTML结构

　　以使用font awesome字体图标的飞机图标为例，HTML结构如下：

　　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');
                        });
    });
});                 

　　关于作者

　　Flyaway.css是進擊的燊投稿发表的作品。他的个人联系方式有：

　　(微博)：http://weibo.com/shenlu89dev

　　(githhub)：https://github.com/lushen

　　(Email)：shenlu89dev@gmail.com

　　(Linkedin)：https://www.linkedin.com/in/shen-lu-ba758567

　　Flyaway.css纸飞机特效的github地址为：https://github.com/lushen/flyaway/tree/master

来源：http://www.htmleaf.com/css3/css3donghua/201603053183.html