html+css+js实现火影背景切换登录页面

1.效果图（代码往下滑）



2.html代码



3.css代码

<style type="text/css">

*{

margin:0px;

padding:0px;

}

html{

overflow:hidden;

}

#ninjia{

position:relative;

width:100%;

height:100%;

}

#ninjia .ninjia-mingren{

position:absolute;

background-size:cover;

transition:3s;

/*opacity:1;*/

}

#ninjia .ninjia-zuozhu{

position:absolute;

background-size:cover;

transition:3s;

/*opacity:0;*/

}

#ninjia .ninjia-zilaiye{

position:absolute;

background-size:cover;

transition:3s;

/*opacity:0;*/

}

#ninjia .ninjia-you{

position:absolute;

back
4000
ground-size:cover;

transition:3s;

/*opacity:0;*/

}

#login{

position:absolute;

top:220px;

left:520px;

}

p{

/*position:absolute;*/

font-size:25px;

color:white;

margin-left:55px;

/*margin:0px auto;*/

font-family:"微软雅黑";

}

.user{

position:absolute;

top:50px;

font-size:18px;

width:270px;

height:44px;

color:white;

background:rgba(45,45,45,0.15);

border-radius:6px;

border:1px solid rgba(255,255,255,.15);

box-shadow:0 2px 3px 0 rgba(0,0,0,1) inset;

text-indent:10px;

}

#login .pwd{

position:absolute;

top:110px;

}

.sub{

position:absolute;

top:170px;

font-size:18px;

font-family:"微软雅黑";

font-weight:20px;

color:#ffffff;

outline:none;

/*background:#ef4300;*/

background:red;

/*background:#ff4e20;*/

height:44px;

width:270px;

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;

cursor:pointer;

opacity:1;

}

</style>

3.原生js代码



这是第一次用原生js写了一些效果，虽然比较简单，但对自己而言也还是进步了一些。这次用的js效果对一些初学者来说还是比较容易

看懂的，（可以去查查js的定时器作用）而且大家可以发现这种动态切换效果在很多网页上都有用到，希望对大家有所帮助。

（注：如果觉得我写的代码不规范，或还是有问题，有更好的建议，欢迎大家评论o(*￣︶￣*)o）