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

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

代码语言：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:1.........完整代码请登录后点击上方下载按钮下载查看