【HTML CSS JS 蝴蝶飞舞特效 绝美（附完整代码）】

<svg class=“wing left” viewBox=“0 0 50 100”

style="-webkit-animation-duration: .35s;

-moz-animation-duration: .35s;

-ms-animation-duration: .35s;

-o-animation-duration: .35s;

animation-duration: .35s;">

<svg class=“wing right” viewBox=“0 0 50 100”

style="-webkit-animation-duration: .35s;

-moz-animation-duration: .35s;

-ms-animation-duration: .53s;

-o-animation-duration: .35s;

animation-duration: .35s;">

style="margin-top: -250px; margin-left: 300px;

-webkit-animation-duration: 4s;

-moz-animation-duration: 4s;

-ms-animation-duration: 4s;

-o-animation-duration: 4s;

animation-duration: 4s;">

<svg class=“wing left” viewBox=“0 0 50 100”

style="-webkit-animation-duration: .45s;

-moz-animation-duration: .45s;

-ms-animation-duration: .45s;

-o-animation-duration: .45s;

animation-duration: .45s;">

<svg class=“wing right” viewBox=“0 0 50 100”

style="-webkit-animation-duration: .45s;

-moz-animation-duration: .45s;

-ms-animation-duration: .45s;

-o-animation-duration: .45s;

animation-duration: .45s;">

style.css

/**

• MIXINS

*/

/* SYMBOLS */

/**

• KEYFRAMES

*/

@-webkit-keyframes rotating {

0% {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

-moz-transform: rotate3d(0, 0, 0, 0deg);

-ms-transform: rotate3d(0, 0, 0, 0deg);

-o-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

100% {

-webkit-transform: rotate3d(0, 1, 0, 720deg);

-moz-transform: rotate3d(0, 1, 0, 720deg);

-ms-transform: rotate3d(0, 1, 0, 720deg);

-o-transform: rotate3d(0, 1, 0, 720deg);

transform: rotate3d(0, 1, 0, 720deg);

}

}

@-moz-keyframes rotating {

0% {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

-moz-transform: rotate3d(0, 0, 0, 0deg);

-ms-transform: rotate3d(0, 0, 0, 0deg);

-o-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

100% {

-webkit-transform: rotate3d(0, 1, 0, 720deg);

-moz-transform: rotate3d(0, 1, 0, 720deg);

-ms-transform: rotate3d(0, 1, 0, 720deg);

-o-transform: rotate3d(0, 1, 0, 720deg);

transform: rotate3d(0, 1, 0, 720deg);

}

}

@-ms-keyframes rotating {

0% {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

-moz-transform: rotate3d(0, 0, 0, 0deg);

-ms-transform: rotate3d(0, 0, 0, 0deg);

-o-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

100% {

-webkit-transform: rotate3d(0, 1, 0, 720deg);

-moz-transform: rotate3d(0, 1, 0, 720deg);

-ms-transform: rotate3d(0, 1, 0, 720deg);

-o-transform: rotate3d(0, 1, 0, 720deg);

transform: rotate3d(0, 1, 0, 720deg);

}

}

@-o-keyframes rotating {

0% {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

-moz-transform: rotate3d(0, 0, 0, 0deg);

-ms-transform: rotate3d(0, 0, 0, 0deg);

-o-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

100% {

-webkit-transform: rotate3d(0, 1, 0, 720deg);

-moz-transform: rotate3d(0, 1, 0, 720deg);

-ms-transform: rotate3d(0, 1, 0, 720deg);

-o-transform: rotate3d(0, 1, 0, 720deg);

transform: rotate3d(0, 1, 0, 720deg);

}

}

@keyframes rotating {

0% {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

-moz-transform: rotate3d(0, 0, 0, 0deg);

-ms-transform: rotate3d(0, 0, 0, 0deg);

-o-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

100% {

-webkit-transform: rotate3d(0, 1, 0, 720deg);

-moz-transform: rotate3d(0, 1, 0, 720deg);

-ms-transform: rotate3d(0, 1, 0, 720deg);

-o-transform: rotate3d(0, 1, 0, 720deg);

transform: rotate3d(0, 1, 0, 720deg);

}

}

@-webkit-keyframes rotatingY {

100% {

-webkit-transform: rotateY(-360deg);

-moz-transform: rotateY(-360deg);

-ms-transform: rotateY(-360deg);

-o-transform: rotateY(-360deg);

transform: rotateY(-360deg);

}

}

@-moz-keyframes rotatingY {

100% {

-webkit-transform: rotateY(-360deg);

-moz-transform: rotateY(-360deg);

-ms-transform: rotateY(-360deg);

-o-transform: rotateY(-360deg);

transform: rotateY(-360deg);

}

}

@-ms-keyframes rotatingY {

100% {

-webkit-transform: rotateY(-360deg);

-moz-transform: rotateY(-360deg);

-ms-transform: rotateY(-360deg);

-o-transform: rotateY(-360deg);

transform: rotateY(-360deg);

}

}

@-o-keyframes rotatingY {

100% {

-webkit-transform: rotateY(-360deg);

-moz-transform: rotateY(-360deg);

-ms-transform: rotateY(-360deg);

-o-transform: rotateY(-360deg);

transform: rotateY(-360deg);

}

}

@keyframes rotatingY {

100% {

-webkit-transform: rotateY(-360deg);

-moz-transform: rotateY(-360deg);

-ms-transform: rotateY(-360deg);

-o-transform: rotateY(-360deg);

transform: rotateY(-360deg);

}

}

/**/

@-webkit-keyframes fluttering {

0%, 25%, 50%, 75%, 100% {

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

10%, 60% {

-webkit-transform: translate3d(0, 150px, 0);

-moz-transform: translate3d(0, 150px, 0);

-ms-transform: translate3d(0, 150px, 0);

-o-transform: translate3d(0, 150px, 0);

transform: translate3d(0, 150px, 0);

}

30%, 80% {

-webkit-transform: translate3d(0, 50px, 0);

-moz-transform: translate3d(0, 50px, 0);

-ms-transform: translate3d(0, 50px, 0);

-o-transform: translate3d(0, 50px,