2018/2/2 22:02:19当前位置推荐好文程序员浏览文章
1.gif

效果知识点:原生js动画效果 ,重力系统,弹跳算法, 迭代与递归, 动画序列, , 两种定时器配合使用, 循环判断注意事项 ,编程思想与解决方案思维。

文章分享之前小编推荐一下我的前端学习群:542827633,里面都是学习前端的,如果你想制作酷炫的网页,想学习前端知识,小编欢迎你的加入。小编会在群中不定期分享干货源码,包括我精心整理的一份前端教程。欢迎各位感兴趣的的小伙伴。

👇html代码:
<div id="bg_wrap">
<div><img src="images/1.jpg" width="100%" height="100%" alt="背景图"/></div>
<div><img src="images/2.jpg" width="100%" height="100%" alt="背景图"/></div>
<div><img src="images/3.jpg" width="100%" height="100%" alt="背景图"/></div>
</div>


<div id="Login">
<h3 id="title" class="move">User Login</h3>
<form action="http://web.tanzhouedu.com/" method="post" target="_blank">
<input type="text" placeholder="Username" class="txt move" name="username" required autocomplete="off">
<input type="password" placeholder="Password" class="txt move" name="password" required>
<input type="submit" class="but move" value="Sign in" id="submit"/>
</form>
</div>

👇css代码:
<style>
{ margin: 0px; padding: 0px; }

body { overflow: hidden; }

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

bg_wrap div { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0; transition: opacity 3s}

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

/第一个背景div/

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

Login .move { position: absolute; top:-100px; }

Login h3 { font-size: 30px; font-weight: 700; color: #ffffff; font-family: Andalus; text-align: center; margin-bottom: 30px; cursor: move; }

Login input.txt { width: 270px; height: 42px; color: #ffffff; background: rgba(45, 45, 45, .15); border-radius: 6px; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; margin-bottom: 25px; text-shadow: 0 1px 2px rgba(0, 0, 0, .1); text-indent: 10px; }

Login input.but { background: #ef4300; width: 272px; height: 44px; box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); border: 0px; border-radius: 6px; color: #ffffff; font-size: 14px; text-align:center;}

Login input:focus { outline: none; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); }

/当input获取焦点的时候/

input::-webkit-input-placeholder { color: #ffffff; }

/修改输入框默认输入文字颜色/

title { width: 270px; text-align: center }

</style>

👇javascript代码:
<script>
/
1. 背景渐变 (定时器 + 透明度改变){

        }        /    //function(){}   /匿名函数/    //()()           /IIFE 匿名函数立刻执行 函数自执行体/    (function(){        var timer=null;   /声明定时器/        /最新的元素获取写法 兼容ie8//一组元素/         var oImg=document.querySelectorAll(#bg_wrap div);        var len=oImg.length; //3        var index=0;        timer=setInterval(function(){            oImg[index].style.opacity=0;             index++;//1 index=index+1;             index%=len;  // 求模取余 index=index%len;            /              0%3= 0 1%3=1  2%3=2 3%3=0整除了            /            oImg[index].style.opacity=1;        },3000);    })();     // 表单重力模拟弹跳系统    (function(){        /            改变定位元素的 top值 1            达到指定位置之后进行弹跳一次 1            多个元素依次运动                         动画序列        /        var oMove=document.querySelectorAll(.move);        var len=oMove.length;        var timer=null;        var timeout=null; //setTimeout        var speed=3;    /  for(var i=len-1;i>=0;i--){            (function(x){                setTimeout(function(){                        clearInterval(timer);                        var end=150+(x60);                        timer=setInterval(function(){                        speed+=3;                         var T=oMove[x].offsetTop+speed;                        if(T>end){                            T=end;                            speed=-1; // 让动量变为负数                            speed=0.4; // 摩擦系数 每一次都慢一点                        }                        console.log(speed)                        oMove[x].style.top=T+px;                    },20);                },900(len-1-x))            })(i)        } /        //oMove[len-1];        move(len-1);        function move(index){            //根据下标来计算end值            if(index<0){//如果下标<0 我们清除所有定时器             clearInterval(timer);     //清除循环定时器             clearTimeout(timeout);    //清除延时定时器             return;                   //终止函数            }            var end=150+(index60);            timer=setInterval(function(){            //动量每回合自增3 模拟重力加速度            speed+=3; // 4 7 11   -30 -27 -24 ... 30 -30            //设置每一次的top值 他本身距离顶端的距离+ 动量            var T=oMove[index].offsetTop+speed;                        //当元素的top大于设定值的时候            if(T>end){                T=end;                speed=-1; // 让动量变为负数                speed=0.4; // 摩擦系数 每一次都慢一点;            }            console.log(speed)            oMove[index].style.top=T+px;        },20);        //过多少时间之后执行函数            timeout=setTimeout(function(){                clearInterval(timer);                index--;     // 3=>2                move(index); // 递归自己调用自己            },900);    }                    })();</script>
网友评论