Home >Web Front-end >H5 Tutorial >基于纯CSS3纸飞机炫酷动画特效

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

PHP中文网
PHP中文网Original
2017-03-30 17:02:472946browse

  简要教程

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

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

873.jpg

  使用方法

  使用该纸飞机动画特效需要在页面中引入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() {
    $(&#39;.animate&#39;).click(function(e) {
        e.preventDefault();
        $(&#39;#demo&#39;).addClass(&#39;flyaway popUp&#39;)
 .one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend&#39;, 
 function() {
 $(&#39;#demo&#39;).removeClass(&#39;flyaway popUp&#39;);
 });
});
});

以上就是基于纯CSS3纸飞机炫酷动画特效的内容,更多相关内容请关注PHP中文网(www.php.cn)!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn