简要教程
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');
});
});
});以上就是基于纯CSS3纸飞机炫酷动画特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
549
