html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.cloudsky {
   
    height: 100%;
    background: #007fd5;
    position: relative;
    overflow: hidden;
    -webkit-animation: sky_background 50s ease-out infinite;
    -moz-animation: sky_background 50s ease-out infinite;
    -o-animation: sky_background 50s ease-out infinite;
    animation: sky_background 50s ease-out infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

    .cloudsky .clouds_one {
         z-index:-9999;
        background: url("/content/cloudcss/images/cloud_one.png");
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 300%;
        -webkit-animation: cloud_one 50s linear infinite;
        -moz-animation: cloud_one 50s linear infinite;
        -o-animation: cloud_one 50s linear infinite;
        animation: cloud_one 50s linear infinite;
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }


    .cloudsky .clouds_two {
         z-index:-9999;
        background: url("/content/cloudcss/images/cloud_two.png");
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 300%;
        -webkit-animation: cloud_two 75s linear infinite;
        -moz-animation: cloud_two 75s linear infinite;
        -o-animation: cloud_two 75s linear infinite;
        animation: cloud_two 75s linear infinite;
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }


    /*屏蔽第三个*/
    /*.cloudsky .clouds_three {
         z-index:-9999;
        background: url("/content/cloudcss/images/cloud_three.png");
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 300%;
        -webkit-animation: cloud_three 100s linear infinite;
        -moz-animation: cloud_three 100s linear infinite;
        -o-animation: cloud_three 100s linear infinite;
        animation: cloud_three 100s linear infinite;
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }*/

@-webkit-keyframes sky_background {
    0% {
        background: #007fd5;
        color: #007fd5;
    }

    50% {
        /*background: #000; 渐变成为蓝色*/
        background: #4646ff;
        color: #a3d9ff;
    }

    100% {
        background: #007fd5;
        color: #007fd5;
    }
}

@-moz-keyframes sky_background {
    0% {
        background: #007fd5;
        color: #007fd5;
    }

    50% {
        /*background: #000; 渐变成为蓝色*/
        background: #4646ff;
        color: #a3d9ff;
    }

    100% {
        background: #007fd5;
        color: #007fd5;
    }
}

@keyframes sky_background {
    0% {
        background: #007fd5;
        color: #007fd5;
    }

    50% {
        /*background: #000; 渐变成为蓝色*/
        background: #4646ff;
        color: #a3d9ff;
    }

    100% {
        background: #007fd5;
        color: #007fd5;
    }
}

@-webkit-keyframes cloud_one {
    0% {
        left: 0;
    }

    100% {
        left: -200%;
    }
}

@-moz-keyframes cloud_one {
    0% {
        left: 0;
    }

    100% {
        left: -200%;
    }
}

@keyframes cloud_one {
    0% {
        left: 0;
    }

    100% {
        left: -200%;
    }
}

@-webkit-keyframes cloud_two {
    0% {
        left: 0;
    }

    100% {
        left: -200%;
    }
}

@-moz-keyframes cloud_two {
    0% {
        left: 0;
    }

    100% {
        left: -200%;
    }
}

@keyframes cloud_two {
    0% {
        left: 0;
    }

    100% {
        left: -200%;
    }
}

/*屏蔽第三个*/
/*@-webkit-keyframes cloud_three {
    0% {
        left: 0;
    }

    100% {
        left: -200%;
    }
}

@-moz-keyframes cloud_three {
    0% {
        left: 0;
    }

    100% {
        left: -200%;
    }
}

@keyframes cloud_three {
    0% {
        left: 0;
    }

    100% {
        left: -200%;
    }
}*/