SOURCE

$(document).ready(

  window.onload = function () {


                function MyRandom(Min, Max) {
                    var max = Max - Min;
                    var rand = Math.random();

                    var Num = Min + Math.round(max * rand);
                    return Num;
                }
                var ranPx = MyRandom(20, 30);

                $('#bgyun>li').css('width', ranPx + 'px');
                $('#bgyun>li').css('height', ranPx + 'px');
                //随机颜色

                var GetRandomColor = function () {
                    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
                }



                $('#bgyun>li').each(function (i) {
                    var li = $('#bgyun>li');
                    var aa = GetRandomColor();
                    $(this).css('background', aa);
                }
                );
    
                $('.txt').keydown(function () {
                    $(this).addClass('shake');
                }).keyup(function () {
                    $(this).removeClass('shake');
                });
     $(document).ready(function () {
                bgFadeIn();
            });


                var bgFadeIn = function () {
                    var $bg = $('.bg4');
                    setTimeout(function () {
                        var bgAnimate = { 'margin-bottom': '0', 'opacity': '1' };
                        $bg.animate(bgAnimate,1000,'linear');
                    },1);
                };



);

<div id="loginWeb">
        <div class="my">

            <div class="bg bg1"></div>
       
            <div class="bg bg2">


                <div class="montop"></div>
                <div class="mon"></div>
                <div class="yun">
                    <ul class="bg-bubbles" id="bgyun">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>

           
            <div class="bg bg3">
                <div class="tree1"></div>
                <div class="tree2"></div>
                <div class="tree3"></div>
                <div class="tree4"></div>

            </div>
            
            <div class="bg bg4"></div>
            <div class="bg bg5"></div>
            <div class="bg bg6"></div>
            
            <div class="bg bg7"></div>
            <div class="bg bg8"></div>
            <div class="bg bg9"></div>
           
            <div class="bg bg10"></div>
           
            <div class="bg bg11">
                <div class="star1"></div>
                <div class="star2"></div>
                <div class="star3"></div>
                <div class="star4"></div>

            </div>
         
            <div class="bg bg12"></div>
           
            <div class="bg bg13" style="z-index: 10">
                

            </div>
            <div class="bg bg14">
                <div class="login">
                    <h2 id="logo">强强科技</h2>
                    
                    <input class="txt" id="Text1" type="text" placeholder="用户名/邮箱" /><label id="tip"
                                                                                                    for="Text1"></label><br />
                    <input class="txt" id="Password1" type="password" placeholder="密码" /><br />
                    <input id="Submit1" type="button" value="登陆" onclick="Login()" /><br />
                    <input id="Submit2" type="submit" value="注册" />

                </div>

            </div>
            <div class="msg"></div>
        </div>
    </div>

/*#region 背景 */
        .bg {
            position: absolute;
            font-family: 'Microsoft YaHei';
        }
        /*#region 太阳 sun */
        .bg1 {
            animation: sun 15s linear infinite;
            top: 20%;
            left: 10%;
            height: 150px;
            width: 20px;
            background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
            background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
        }

            .bg1:before {
                content: '';
                position: absolute;
                height: 150px;
                width: 20px;
                background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                transform: rotate(-90deg);
            }

            .bg1:after {
                content: '';
                position: absolute;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background-color: #f2dc2c;
                margin-left: -28px;
                margin-top: 35px;
                box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
            }


        /*#endregion */

        .bg2 {
            bottom: 0;
            left: 20%;
            /*z-index:2;*/
        }
        /*#region bg2 火山 */
        /*.montop{

            border-bottom:30px solid #f10d0d;
            border-left:20px solid  transparent;
            border-right:20px solid  transparent;
            height:0;
            width:90px;
            margin-left:50px;
            z-index:9;
            display:none;
        }*/
        .mon:after {
            content: '';
            position: absolute;
            border-bottom: 30px solid #f10d0d;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            height: 0;
            width: 90px;
            bottom: 0px;
            z-index: 5;
        }

        .mon {
            border-bottom: 180px solid #4b4646;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            height: 0;
            width: 130px;
            z-index: 2;
            /*display:none;*/
            position: absolute;
            bottom: 0;
        }

        /*#endregion */
        .bg3 {
            bottom: 0;
            left: 35%;
            text-align: center;
            z-index: 4;
        }
            /*#region bg3 tree 大树 */
            .bg3 .tree1 {
                width: 0;
                height: 0;
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;
                border-bottom: 40px solid #427939;
                z-index: 4;
            }

            .bg3 .tree2 {
                width: 0;
                height: 0;
                border-left: 30px solid transparent;
                border-right: 30px solid transparent;
                border-bottom: 50px solid #427939;
                z-index: 3;
                margin-left: -10px;
                margin-top: -15px;
            }

            .bg3 .tree3 {
                width: 0;
                height: 0;
                border-left: 40px solid transparent;
                border-right: 40px solid transparent;
                border-bottom: 60px solid #427939;
                z-index: 3;
                margin-left: -20px;
                margin-top: -20px;
            }

            .bg3 .tree4 {
                width: 20px;
                height: 60px;
                background: #76702d;
                margin-left: 10px;
            }

        /*#endregion */
        /*三角*/
        .bg4 {
            bottom: 0;
            margin-bottom:-150px;
            left: 15%;
            width: 0;
            height: 0;
            border-left: 70px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 120px solid #ada2a2;
            z-index: 3;
        }

        .bg5 {
            bottom: 0;
            left: 12%;
            width: 0;
            height: 0;
            border-left: 60px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid #808080;
            z-index: 2;
        }

        .bg6 {
            bottom: 0;
            left: 10%;
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 80px solid #ada2a2;
            z-index: 2;
        }

        .bg7 {
            bottom: 0;
            left: 5%;
            width: 0;
            height: 0;
            border-left: 60px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 100px solid #808080;
            z-index: 3;
        }
        /*云*/
        .bg8 {
            animation: clouny 10s linear infinite;
            bottom: 0;
            left: 30%;
            background: #FFFFFF;
            border-radius: 50%;
            box-shadow: #FFFFFF 20px -5px 0 -5px, #FFFFFF 10px -5px, #FFFFFF 10px 5px, #FFFFFF 10px 0px 0 -10px, #ffffff 20px 5px 0 -2px;
            height: 20px;
            width: 20px;
            margin-left: -100px;
            z-index: 2;
            margin-bottom: 150px;
            transform: rotate(-5deg);
        }
        /*云*/
        .bg9 {
            animation: clouny2 2.5s linear infinite;
            bottom: 0;
            left: 30%;
            background: #FFFFFF;
            border-radius: 50%;
            box-shadow: #FFFFFF 10px 5px 0 -4px, #FFFFFF 5px -5px, #FFFFFF 5px 0px, #FFFFFF 5px 5px 0 -10px, #ffffff 10px 0px 0 -1px;
            height: 10px;
            width: 10px;
            margin-left: -100px;
            z-index: 8;
            margin-bottom: 190px;
        }
        /*#region 星球 */
        .bg10 {
            animation: qiu 2s linear infinite;
            left: 70%;
            top: 15%;
            width: 50px;
            height: 25px;
            border-radius: 50px 50px 0 0;
            background: #0e6c96;
            z-index: 9;
            transform: rotate(-45deg);
        }

            .bg10:before {
                content: '';
                width: 60px;
                height: 10px;
                border-radius: 50%;
                background: #0e6c96;
                z-index: 9;
                /*transform:rotate(-45deg);*/
                margin-left: -5px;
                position: absolute;
                margin-top: 20px;
            }

            .bg10:after {
                content: '';
                width: 50px;
                height: 25px;
                border-radius: 0 0 50px 50px;
                background: #0d425a;
                z-index: 8;
                margin-top: 24px;
                /*transform:rotate(-45deg);*/
                position: absolute;
            }


        /*#endregion */
        /*#region 星星1 */
        .bg11 {
            top: 20%;
            left: 70%;
        }

            .bg11 .star1 {
                animation: star 4s linear infinite ;
                height: 20px;
                width: 2px;
                border-radius: 50%;
                background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
            }

                .bg11 .star1:after {
                    content: '';
                    position: absolute;
                    height: 20px;
                    width: 2px;
                    border-radius: 50%;
                    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                    transform: rotate(120deg);
                }

                .bg11 .star1:before {
                    content: '';
                    position: absolute;
                    height: 20px;
                    width: 2px;
                    border-radius: 50%;
                    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                    transform: rotate(240deg);
                }
            /*#endregion */
            /*#region 星星2 */

            .bg11 .star2 {
                margin-left: 50px;
                animation: star 4.5s ease-in infinite;
                height: 10px;
                width: 2px;
                border-radius: 50%;
                background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
            }

                .bg11 .star2:after {
                    content: '';
                    position: absolute;
                    height: 10px;
                    width: 2px;
                    border-radius: 50%;
                    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                    transform: rotate(120deg);
                }

                .bg11 .star2:before {
                    content: '';
                    position: absolute;
                    height: 10px;
                    width: 2px;
                    border-radius: 50%;
                    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
                    transform: rotate(240deg);
                }
        /*#endregion */
        /*#region 卫星 */
        .bg12 {
            top: 30%;
            left: 70%;
            animation: wstar 13s ease infinite;
        }

            .bg12:after {
                content: '';
                position: absolute;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: #ada2a2;
                animation: wstar2 13s ease-in-out infinite;
            }

        /*#endregion */


        /*#endregion */
        * {
            padding: 0;
            margin: 0;
            font-family: 'Microsoft YaHei';
        }

        body {
            background: #4b97ac;
        }
        /*#region Login 登陆框 */

        .bg14 {
            width: 100%;
            height: 100%;
            /*background:rgba(65, 178, 175, 0.30);*/
            top: 0;
            left: 0;
            z-index: 9;
        }

            .bg14 .login {
                border-radius: 5px;
                height: 300px;
                width: 400px;
                position: relative;
                top: 25%;
                left: 50%;
                margin-left: -200px;
                text-align: center;
                /*background:rgba(65, 178, 175, 0.50);*/
                box-shadow: 0 -15px 30px #35c5ca;
            }

                .bg14 .login input {
                    width: 180px;
                    height: 30px;
                    margin-top: 20px;
                    background: rgba(255, 255, 255, 0.30);
                    font-size: 12px;
                    color: black;
                    border: 1px solid rgba(255,255,255,0.4);
                    border-radius: 3px;
                    -webkit-transition: 0.5s all ease;
                    transition: .5s all ease;
                }

                    .bg14 .login input:focus {
                        width: 200px;
                        background: rgba(255, 255, 255, 0.50);
                        border-color: rgba(255,255,255,0.8);
                        box-shadow: 0 0 20px white;
                    }

        #Submit1, #Submit2 {
            cursor: pointer;
            color: white;
            font-size: 14px;
        }

        .bg14 .login input:hover {
            background: rgba(255, 255, 255, 0.50);
        }

        .bg14 .login h2 {
            padding-top: 20px;
            color: white;
        }

        .shake {
            animation: shake 0.1s ease;
        }

        ::-webkit-input-placeholder {
            color: white;
            vertical-align: middle;
            font-family: Webdings;
        }

        :-moz-placeholder {
            color: white;
            vertical-align: middle;
            font-family: Webdings;
        }

        ::-moz-placeholder {
            color: white;
            vertical-align: middle;
            font-family: Webdings;
        }


        /*#endregion */



        /*#region 动画 */
        /*#region 太阳animation 动画 */
        @-webkit-keyframes sun {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes sun {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /*#endregion */

        /*#region 火山云 animation 动画 */
        @-webkit-keyframes clouny {
            50% {
                margin-left: 60px;
            }
        }

        @keyframes clouny {
            50% {
                margin-left: 60px;
            }
        }

        /*#endregion */
        /*#region 火山云 animation 动画2 */
        @-webkit-keyframes clouny2 {
            50% {
                margin-bottom: 170px;
            }
        }

        @keyframes clouny2 {
            50% {
                margin-bottom: 170px;
            }
        }

        /*#endregion */
        /*#region 星球 animation 动画 */
        @-webkit-keyframes qiu {
            50% {
                margin-top: 20px;
            }
        }

        @keyframes qiu {
            50% {
                margin-top: 20px;
            }
        }

        /*#endregion */
        /*#region star 星星 animation 动画 */
        @-webkit-keyframes star {
            50% {
                opacity: 0;
            }
        }

        @keyframes star {
            50% {
                opacity: 0;
            }
        }

        /*#endregion */

        /*#region star 卫星 animation 动画 */
        @-webkit-keyframes wstar {
            50% {
                animation-timing-function: ease-in-out;
                transform: translateY(-100px);
            }
        }

        @keyframes wstar {
            50% {
                animation-timing-function: ease-in-out;
                transform: translateY(-100px);
            }
        }

        @-webkit-keyframes wstar2 {
            50% {
                animation-timing-function: ease;
                transform: translateX(100px);
            }
        }

        @keyframes wstar2 {
            50% {
                animation-timing-function: ease;
                transform: translateX(100px);
            }
        }
        /*#endregion */

        /*#region 文本框shake动画 */
        @-webkit-keyframes shake {
            0% {
                transform: translate(2px,2px);
            }

            25% {
                transform: translate(-2px,-2px);
            }

            50% {
                transform: translate(0,0);
            }

            75% {
                transform: translate(2px,2px);
            }

            100% {
                transform: translate(0,0);
            }
        }

        @keyframes shake {
            0% {
                transform: translate(2px,2px);
            }

            25% {
                transform: translate(-2px,-2px);
            }

            50% {
                transform: translate(0,0);
            }

            75% {
                transform: translate(2px,2px);
            }

            100% {
                transform: translate(0,0);
            }
        }

        /*#endregion */
        /*#endregion */

        .yun {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 95px;
            height: 180px;
            z-index: 1;
            margin-left: 70px;
        }

        .bg-bubbles {
            width: 100%;
            z-index: 1;
            height: 100%;
        }

        .yun .bg-bubbles li {
            list-style: none;
            float: left;
            /*width: 30px;
  height: 30px;*/
            /*transform: scale(0.5);*/
            /*background-color: rgba(75, 70, 70, 0.77);*/
            bottom: -160px;
            -webkit-animation: square 20s infinite;
            animation: square 20s infinite;
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
            z-index: 1;
        }

        .bg-bubbles li:nth-child(1) {
            left: 20%;
            /*width: 10px;
  height: 10px;*/
            zoom: 0.5;
            z-index: 1;
        }

        .bg-bubbles li:nth-child(2) {
            left: 20%;
            zoom: 0.5;
            border-radius: 40%;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
            -webkit-animation-duration: 14s;
            animation-duration: 14s;
            z-index: 1;
        }

        .bg-bubbles li:nth-child(3) {
            left: 25%;
            zoom: 0.6;
            /*background-color:#50a3a2;*/
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
            z-index: 1;
        }

        .bg-bubbles li:nth-child(4) {
            left: 40%;
            zoom: 0.8;
            -webkit-animation-duration: 12s;
            animation-duration: 12s;
            z-index: 1;
        }

        .bg-bubbles li:nth-child(5) {
            left: 70%;
            zoom: 0.65;
            z-index: 1;
        }

        .bg-bubbles li:nth-child(6) {
            left: 80%;
            /*width: 20px;
  height: 20px;*/
            zoom: 0.78;
            z-index: 1;
            -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
        }

        .bg-bubbles li:nth-child(7) {
            left: 32%;
            /*width: 10px;
  height: 10px;*/
            zoom: 0.4;
            z-index: 1;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
            z-index: 1;
        }

        .bg-bubbles li:nth-child(8) {
            left: 55%;
            zoom: 0.9;
            /*width: 20px;
  height: 20px;*/
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            z-index: 1;
        }

        .bg-bubbles li:nth-child(9) {
            left: 25%;
            zoom: 0.2;
            /*width: 10px;
  height: 10px;*/
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
            -webkit-animation-duration: 12s;
            animation-duration: 12s;
            z-index: 1;
        }

        @-webkit-keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            100% {
                -webkit-transform: translateY(-700px) rotate(600deg);
                transform: translateY(-700px) rotate(600deg);
            }
        }

        @keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            100% {
                -webkit-transform: translateY(-700px) rotate(600deg);
                transform: translateY(-700px) rotate(600deg);
            }
        }