css实现三维天空蝴蝶飞舞动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现三维天空蝴蝶飞舞动画效果代码

代码标签: 天空 蝴蝶 飞舞 动画 效果

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /**
* 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("//repo.bfw.wiki/bfwrepo/image/60fe037d081bf.png");
        }
        .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("//repo.bfw.wiki/bfwrepo/image/60fe0390d61fa.png");
        }
     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0