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)
