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

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

2.html代码

3.css代码
 

*{
    margin:0px;
    padding:0px;
}
/* *号是全部的都外边距和内边距都为0，而body只是主题的外边距和内边距都为0  需要给 html 和 body 同时设宽高 100% 图片才能覆盖浏览器页面*/
html,body{
    overflow:hidden;
	width:100%;
	height:100%;
}
#ninjia{
    position:relative;
    width:100%;
    height:100%;
	/*设置 border 为透明，防止内部外边距溢出*/
	border: 1px solid transparent;
}


#ninjia div{
    position:absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
    transition:3s;
}

p{
    /*position:absolute;*/
    font-size:25px;
	width: 270px;
    color:white;
	text-align: center;
    margin: 200px auto 0;
    /*margin:0px auto;*/
    font-family:"微软雅黑";
}
.user{
    display: block;
	margin: 20px auto;
    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;
}

.sub{
    display: block;
	margin: auto;
    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;
}

    

3.原生js代码

 

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

看懂的，希望对大家有所帮助。

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