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代碼