纯CSS3实现纸飞机动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS3实现纸飞机动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3实现纸飞机动画特效</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel='stylesheet' href='css/font-awesome.min.css'>
<link rel="stylesheet" href="css/flyaway.min.css">
</head>
<body>
<div class="container jumbotron">
	<h1 class="text-center"><i class="fa fa-paper-plane float shadow"></i> Flyaway<a href="">.css</a></h1>
	<br>
	<section class="text-center block">
		<ul class="social list-inline">
			<li>
				<i id="demo" class="fa fa-paper-plane fa-3x float shadow"></i>
			</li>
		</ul>
	</section>
	<section class="text-center block">
		<select class="select">
			<optgroup label="Flyout">
				<option value="pushOut">pushOut</option>
				<option value="popUp">popUp</option>
			</optgroup>
			<optgroup label="Shake">
				<option value="linearShake">linearShake</option>
				<option value="rotateShake">rotateShake</option>
			</optgroup>
		</select>
		<button class="animate">Animate</button>
	</section>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/flyaway.js"></script>
</body>
</html>

JS代码(flyaway.js):

function animate(x){
	$('#demo').removeClass('float shadow').addClass('flyaway ' + x).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
	$('#demo').addClass('shadow float').removeClass('flyaway ' + x);
}
);
}
;
	$(document).ready(function(){
	$('.animate').click(function(e){
	e.preventDefault();
	var anim = $('.select').val();
	animate(anim);
}
);
}
);

CSS代码(main.css):

*{transition:all .2s ease-in-out;outline:none;}
@keyframes text-fade{0%{opacity:0;}
}
body{background-color:#2d7586;font-family:Galdeano,"Hiragino Sans GB","Microsoft YaHei",Trebuchet,"Trebuchet MS",Tahoma,"Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#fff;animation:text-fade 2s ease-in-out;}
@media (min-width:768px){.container{max-width:750px;animation:text-fade 1s;}
}
.jumbotron{background-color:transparent;}
a{color:#CCD1D9;}
a:hover{color:rgba(170,178,189,0.3);text-decoration:none;}
@keyframes bounce-in{0%{padding-right:30px;}
40%{padding-right:6px;}
50%{padding-left:30px;}
100%{padding-left:6px;}
}
.download{font-size:20px;font-family:'Pacifico';overflow:visible;border-radius:3px;position:relative;padding-right:30px;border:none;background-color:#fff;color:#2d7586;display:block;margin:5px auto;height:50px;width:150px;}
.download:hover{background-color:#fff;}
.download:hover i{transform:rotate(10deg);}
.download i{position:absolute;top:15px;right:15px;}
.download.bounce-in{background-color:rgb(50,130,149);border:none;color:#fff;padding-right:6px;animation:bounce-in 0.4s;}
.block{height:80px;}
.animate{font-size:20px;overflow:visible;border-radius:4px;background-color:transparent;position:relative;border:1.5px solid white;margin-top:15px;margin-bottom:15px;height:40px;}
.select{border:none;border-radius:4px;padding:.75rem;margin:15px;background-color:white;color:#2d7586;font-size:20px;}
.float{animation:float 4s infinite ease-in-out alternate;}
@keyframes zoom{from,to{background-color:rgba(170,178,189,0.3);transform:scale(.6) rotate(0.01deg);}
50%{background-color:rgba(170,178,189,0.6);transform:scale(.8) rotate(0.01deg);}
}
.shadow:after{position:relative;display:block;width:1em;height:.5em;border-radius:100%;content:"";animation:zoom 4s ease-in-out infinite alternate;}
@keyframes rotateShake{from{transform:rotate(-10deg);}
to{transform:rotate(10deg);}
}
@keyframes float{from,to{transform:transofrmY(0);}
50%{transform:translateY(4px);}
}

附件:下载该文件资源,减少时间成本(增值服务)