Flyaway.css-炫酷纯CSS3纸飞机动画特效

当前位置:主页 > CSS3库 > CSS3动画 > Flyaway.css-炫酷纯CSS3纸飞机动画特效
Flyaway.css-炫酷纯CSS3纸飞机动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-03-05
    阅读:
麦子学院
简要教程

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

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

css3纸飞机特效

使用方法

使用该纸飞机动画特效需要在页面中引入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');
                        });
    });
});                 
                

关于作者

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

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

网友评论