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

c-0.033-2.367,0.034-4.117,0.2-5.25c0.3-1.034,0.483-1.8,0.55-2.3c0.167-0.867,0.034-1.533-0.4-2c-0.6-0.7-1.133-1.517-1.6-2.45

c-0.566-1.133-0.833-2.117-0.8-2.95c0.033-1.333,0.167-2.367,0.4-3.1c0.367-1.267,1.05-2.267,2.05-3

C4.417,4.25,6.483,3.317,8.65,2.85z"/>

style="margin-top: -150px; margin-left: 140px;

-webkit-animation-duration: 5s;

-moz-animation-duration: 5s;

-ms-animation-duration: 5s;

-o-animation-duration: 5s;

animation-duration: 5s;">

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

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

-moz-animation-duration: .75s;

-ms-animation-duration: .75s;

-o-animation-duration: .75s;

animation-duration: .75s;">

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

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

-moz-animation-duration: .75s;

-ms-animation-duration: .75s;

-o-animation-duration: .75s;

animation-duration: .75s;">

style="margin-top: -10px; margin-left: 50px;

-webkit-animation-duration: 5s;

-moz-animation-duration: 5s;

-ms-animation-duration: 5s;

-o-animation-duration: 5s;

animation-duration: 5s;">

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

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

-moz-animation-duration: .75s;

-ms-animation-duration: .75s;

-o-animation-duration: .75s;

animation-duration: .75s;">

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

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

-moz-animation-duration: .75s;

-ms-animation-duration: .75s;

-o-animation-duration: .75s;

animation-duration: .75s;">

style="margin-top: 20px;

-webkit-animation-duration: 20s;

-moz-animation-duration: 20s;

-ms-animation-duration: 20s;

-o-animation-duration: 20s;

animation-duration: 20s;">

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

style="-webkit-animation-duration: 1s;

-moz-animation-duration: 1s;

-ms-animation-duration: 1s;

-o-animation-duration: 1s;

animation-duration: 1s;">

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

style="-webkit-animation-duration: 1s;

-moz-animation-duration: 1s;

-ms-animation-duration: 1s;

-o-animation-duration: 1s;

animation-duration: 1s;">

style="margin-top: 100px; margin-left: 50px;

-webkit-animation-duration: 20s;

-moz-animation-duration: 20s;

-ms-animation-duration: 20s;

-o-animation-duration: 20s;

animation-duration: 20s;">

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

style="-webkit-animation-duration: 1.2s;

-moz-animation-duration: 1.2s;

-ms-animation-duration: 1.2s;

-o-animation-duration: 1.2s;

animation-duration: 1.2s;">

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

style="-webkit-animation-duration: 1.2s;

-moz-animation-duration: 1.2s;

-ms-animation-duration: 1.2s;

-o-animation-duration: 1.2s;

animation-duration: 1.2s;">

style="margin-top: 150px;

-webkit-animation-duration: 20s;

-moz-animation-duration: 20s;

-ms-animation-duration: 20s;

-o-animation-duration: 20s;

animation-duration: 20s;">

<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, 0);

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

}

}

@-moz-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, 0);

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

}

}

@-ms-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, 0);

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

}

}

@-o-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, 0);

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

}

}

@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, 0);

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

}

}

/**/

@-webkit-keyframes left-wing-flap {

0% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

}

50% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

}

}

@-moz-keyframes left-wing-flap {

0% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

}

50% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

}

}

@-ms-keyframes left-wing-flap {

0% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

}

50% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

}

}

@-o-keyframes left-wing-flap {

0% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

}

50% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

}

}

@keyframes left-wing-flap {

0% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

}

50% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);

}

}

@-webkit-keyframes right-wing-flap {

0% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

}

50% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

}

}

@-moz-keyframes right-wing-flap {

0% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

}

50% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

}

}

@-ms-keyframes right-wing-flap {

0% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

}

50% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

}

}

@-o-keyframes right-wing-flap {

0% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

}

50% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

}

}

@keyframes right-wing-flap {

0% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

}

50% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);

}

100% {

-webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

-o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);

}

}

/**

*/

/**

• SOURCE

*/

body {

width: 100%;

height: 100%;

overflow: hidden;

}

.background {

position: absolute;

width: 100%;

height: 100%;

}

.scene3d {

-webkit-perspective: 1000px;

-moz-perspective: 1000px;

-ms-perspective: 1000px;

-o-perspective: 1000px;

perspective: 1000px;

-webkit-perspective-origin: 50% 50%;

-moz-perspective-origin: 50% 50%;

-ms-perspective-origin: 50% 50%;

-o-perspective-origin: 50% 50%;

perspective-origin: 50% 50%;

position: absolute;

width: 100%;

height: 100%;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.skybox.cube {

position: absolute;

left: 50%;

top: 50%;

width: 512px;

height: 512px;

margin-left: -256px;

margin-top: -256px;

-webkit-perspective-origin: 50% 50%;

-moz-perspective-origin: 50% 50%;

-ms-perspective-origin: 50% 50%;

-o-perspective-origin: 50% 50%;

perspective-origin: 50% 50%;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-animation: rotatingY 40s linear infinite;

-moz-animation: rotatingY 40s linear infinite;

-ms-animation: rotatingY 40s linear infinite;

-o-animation: rotatingY 40s linear infinite;

animation: rotatingY 40s linear infinite;

}

.skybox.cube var.scale {

position: absolute;

left: 50%;

top: 50%;

width: 512px;

height: 512px;

margin-left: -256px;

margin-top: -256px;

-webkit-perspective-origin: 50% 50%;

-moz-perspective-origin: 50% 50%;

-ms-perspective-origin: 50% 50%;

-o-perspective-origin: 50% 50%;

perspective-origin: 50% 50%;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);

-moz-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);

-ms-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);

-o-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);

transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);

}

.skybox.cube .face {

position: absolute;

left: 50%;

top: 50%;

width: 512px;

height: 512px;

margin-left: -256px;

margin-top: -256px;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;

}

.skybox.cube .face.front {

-webkit-transform: rotateY(0deg) translateZ(-256px);

-moz-transform: rotateY(0deg) translateZ(-256px);

-ms-transform: rotateY(0deg) translateZ(-256px);

-o-transform: rotateY(0deg) translateZ(-256px);

transform: rotateY(0deg) translateZ(-256px);

background-image: url(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_front.jpg”);

}

.skybox.cube .face.back {

-webkit-transform: rotateY(180deg) translateZ(-256px);

-moz-transform: rotateY(180deg) translateZ(-256px);

-ms-transform: rotateY(180deg) translateZ(-256px);

-o-transform: rotateY(180deg) translateZ(-256px);

transform: rotateY(180deg) translateZ(-256px);

background-image: url(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_back.jpg”);

}

.skybox.cube .face.right {

-webkit-transform: rotateY(-90deg) translateZ(-256px);

-moz-transform: rotateY(-90deg) translateZ(-256px);

-ms-transform: rotateY(-90deg) translateZ(-256px);

-o-transform: rotateY(-90deg) translateZ(-256px);

transform: rotateY(-90deg) translateZ(-256px);

background-image: url(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_right.jpg”);

}

.skybox.cube .face.left {

-webkit-transform: rotateY(90deg) translateZ(-256px);

-moz-transform: rotateY(90deg) translateZ(-256px);

-ms-transform: rotateY(90deg) translateZ(-256px);

-o-transform: rotateY(90deg) translateZ(-256px);

transform: rotateY(90deg) translateZ(-256px);

background-image: url(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_left.jpg”);

}

.skybox.cube .face.top {

-webkit-transform: rotateX(-90deg) translateZ(-256px);

-moz-transform: rotateX(-90deg) translateZ(-256px);

-ms-transform: rotateX(-90deg) translateZ(-256px);

-o-transform: rotateX(-90deg) translateZ(-256px);

transform: rotateX(-90deg) translateZ(-256px);

background-image: url(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_top.jpg”);

}

.skybox.cube .face.bottom {

-webkit-transform: rotateX(90deg) translateZ(-256px);

-moz-transform: rotateX(90deg) translateZ(-256px);

-ms-transform: rotateX(90deg) translateZ(-256px);

-o-transform: rotateX(90deg) translateZ(-256px);

transform: rotateX(90deg) translateZ(-256px);

background-image: url(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/hazy_lake_top.jpg”);

background: none;

}

.butterfly_container {

position: absolute;

left: 50%;

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！