jquery实现多彩蝴蝶飞舞动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：jquery实现多彩蝴蝶飞舞动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
@import url(https://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
	@import url(https://fonts.googleapis.com/css?family=Raleway);
	body {
	    background: url(//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png) no-repeat;
background-size: cover;
height: 100vh;
}
#container {
	position:absolute;
	top:0;
	left:0;
	-webkit-transform-style:preserve-3d
}
.ko {
	font-family:'Nanum Brush Script',cursive;
	font-size:40px
}
.nabpi {
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform-origin:50% 50%;
	-moz-transform-style:preserve-3d;
	-moz-transform-origin:50% 50%;
	transform-style:preserve-3d;
	transform-origin:50% 50%
}
.wing {
	margin:0;
	-webkit-animation:wing-animation .5s linear infinite;
	-moz-animation:wing-animation .5s linear infinite;
	animation:wing-animation .5s linear infinite
}
.left.wing {
	-webkit-transform-origin:right center;
	-moz-transform-origin:right center;
	transform-origin:right center
}
.right.wing {
	-webkit-transform-origin:left center;
	-moz-transform-origin:left center;
	transform-origin:left center
}
.n1 {
	width:233px;
	height:130px;
	margin-left:-116px;
	margin-top:-65px
}
.n1 .body {
	position:absolute;
	background:url("//repo.bfw.wiki/bfwrepo/images/xiyou/nabpi01.png") no-repeat -237px top;
	width:49px;
	height:130px;
	margin-left:90px;
	-webkit-transform:translateZ(70px)
}
.n1 .left.wing {
	position:absolute;
	background:url("//repo.bfw.wiki/bfwrepo/images/xiyou/nabpi01.png") no-repeat left top;
	width:110px;
	height:130px
}
.n1 .right.wing {
	position:absolute;
	background:url("//repo.bfw.wiki/bfwrepo/images/xiyou/nabpi01.png") no-repeat -127px top;
	width:110px;
	height:130px;
	margin-left:123px
}
.n2 {
	width:269px;
	height:154px;
	margin-left:-135px;
	margin-top:-77px
}
.n2 .body {
	position:absolute;
	background:url("//repo.bfw.wiki/bfwrepo/images/xiyou/nabpi02.png") no-repeat -269px top;
	width:55px;
	height:154px;
	margin-left:101px;
	-webkit-transform:translateZ(70px)
}
.n2 .left.wing {
	position:absolute;
	background:url("//repo.bfw.wiki/bfwrepo/images/xiyou/nabpi02.png") no-repeat left top;
	width:132px;
	height:154px
}
.n2 .right.wing {
	position:absolute;
	background:url("//repo.bfw.wiki/bfwrepo/images/xiyou/nabpi02.png") no-repeat -137px top;
	width:132px;
	height:154px;
	margin-left:138px
}
.n3 {
	width:269px;
	height:154px;
	margin-left:-135px;
	margin-top:-77px
}
.n3 .body {
	position:absolute;
	background:url("//repo.bfw.wiki/bfwrepo/images/xiyou/nabpi03.png") no-repeat -269px top;
	width:55px;
	height:154px;
	margin-left:101px;
	-webkit-transform:translateZ(70px)
}
.n3 .left.wing {
	position:absolute;
	background:url("//repo.bfw.wiki/bfwrepo/images/xiyou/nabpi03.png") no-repeat left top;
	width:132px;
	height:154px
}
.n3 .right.wing {
	position:absolute;
	background:url("//repo.bfw.wiki/bfwrepo/images/xiyou/nabpi03.png") no-repeat -137px top;
	width:132px;
	height:154px;
	margin-left:138px
}
@-webkit-keyframes nabpi-animation {
	from {
	-webkit-transform:translateZ(0)
}
50% {
	-webkit-transform:translateZ(100)
}
to {
	-webkit-transform:translateZ(0)
}
}@-webkit-keyframes wing-animation {
	from {
	-webkit-transform:rotateY(0deg)
}
70% {
	-webkit-transform:rotateY(80deg)
}
to {
	-webkit-transform:rotateY(0deg)
}
}@-moz-keyframes wing-animation {
	from {
	-moz-transform:rotateY(0deg)
}
70% {
	-moz-transform:rotateY(80deg)
}
to {
	-moz-transform:rotateY(0deg)
}
}@keyframes wing-animation {
	from {
	transform:rotateY(0deg)
}
70% {
	transform:rotateY(80deg)
}
to {
	transform:rotateY(0deg)
}
}
</style>
</head>

<body>
    <div id="container"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script >
        (function(a) {
          var b = a("body");
          var d = [];
          var f = a(docu.........完整代码请登录后点击上方下载按钮下载查看