loginDemo
/
login.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>梦幻登录</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body {
        overflow: hidden;
    }

    #bg_wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    #bg_wrap div {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        /* 设置透明度 */
        transition: opacity 3s;
    }
    /* nth-of-type(1) *筛选选择器选择第一个*/

    #bg_wrap div:nth-of-type(1) {
        opacity: 1;
    }

    #Login {
        width: 272px;
        height: 300px;
        margin: 200px auto;
    }

    #Login .move {
        position: absolute;
        top: -100px;
        z-index: 999;
    }

    #Login h3 {
        width: 270px;
        font-size: 30px;
        font-weight: 700;
        color: #fff;
        font-family: '微软雅黑';
        text-align: center;
        margin-bottom: 30px;
        cursor: move;
        /* top: 100px; */
    }
    /*  #username {
        top: 170px;
    }

    #password {
        top: 225px;
    } */

    #Login input.text {
        width: 270px;
        height: 42px;
        color: #fff;
        background: rgba(45, 45, 45, 0.15);
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 1.0) inset;
        text-indent: 10px;
    }

    #Login input.btn {
        /* top: 280px; */
        background: #ef4300;
        width: 272px;
        height: 44px;
        border-radius: 6px;
        color: #fff;
        box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2);
        /* -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2); */
        border: 0;
        text-align: center;
    }
    /* #Login input.focus {
        outline: none;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2) inset;
    } */

    input::-webkit-input-placeholder {
        color: #fff;
    }
    </style>
</head>

<body>
    <div id="bg_wrap">
        <div><img src="images/1.jpg" width="100%" height="100%"></div>
        <div><img src="images/2.jpg" width="100%" height="100%"></div>
        <div><img src="images/3.jpg" width="100%" height="100%"></div>
    </div>
    <div id="Login">
        <h3 id="title" class="move">User Login</h3>
        <form action="#" method="post" target="_blank">
            <input type="text" placeholder="UserName" name="username" id="username" class="text move">
            <input type="password" placeholder="PassWord" name="password" id="password" class="text move">
            <input type="submit" value="Sign in" class="btn move" id="submit">
        </form>
    </div>
    <script type="text/javascript">
    /*背景渐变*/
    /*function(){}   匿名函数
      ()()           IIFE匿名函数立刻执行，函数自执行体*/
    (function() {
        var timer = null; //声明定时器
        var oImg = document.querySelectorAll('#bg_wrap div') //h5最新元素获取写法获取到的是一组元素
        //querySelector获取单个元素的   兼容ie8
        var len = oImg.length; //3
        var index = 0;
        timer = setInterval(function() {
            oImg[index].style.opacity = 0;
            index++;
            // if(index>=3){
            // 	index=0;
            // }
            index %= len; //index=index%len求模取余 0%3=0; 1%3=1; 2%3=2; 3%3=0;
            oImg[index].style.opacity = 1;
        }, 2000);
    })();
    // 重力模拟弹跳系统
    (function() {
        /*
        改变定位元素的top值
        达到指定位置之后进行弹跳一次
        多个元素一次运动
        动画序列*/
        var oMove = document.querySelectorAll('.move');
        var oLen = oMove.length;
        var timer = null;
        var timeout = null;
        var speed = 3; //移动距离
        move(oLen - 1);

        function move(index) {
            if (index < 0) {
                clearInterval(timer); //清除循环定时器
                clearTimeout(timeout); //清除延时定时器
                return; //终止函数
            }
            var endTop = 150 + (index * 60); //根据下标计算endTop值
            timer = setInterval(function() {
                speed += 3;
                var T = oMove[index].offsetTop + speed; //设置每一次的top值
                if (T > endTop) {
                    T = endTop;
                    speed *= -1 //取反，让移动距离变为负数
                    speed *= 0.4;
                    //慢慢停下来
                }
                oMove[index].style.top = T + 'px';
            }, 20);
            timeout = setTimeout(function() {
                clearInterval(timer);
                index--;
                console.log(9);
                move(index);
                console.log(index);
            }, 900) //过900毫秒之后再执行方法里的代码
        }
    })()
    </script>
</body>

</html>