本文介绍了Flyaway.css，一个由進擊的燊创作的纯CSS3纸飞机动画库。这个库提供了多种飞行和摇动模式，如Flyout和Shake，适用于登录成功或信息验证错误的反馈。通过添加特定的class，可以利用jQuery触发飞机的动画效果。文章还提供了作者的联系方式及项目GitHub链接。
简要教程
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模式可以应用于登录页面
最低0.47元/天 解锁文章
扫一扫
568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
