css_制作登录界⾯（渐变_简约）css的annimation以及box
效果
布局思想
思想
登陆背景居中，动漫图⽚和输⼊框各占1/2，调整输⼊框的交互样式，避免违和感。
登录的框加上阴影，增加层次感。
背景加上渐变，画⾯显得灵动。
html布局
<div class="tiltle">login form</div>
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="formBox">
<form>
<p>username</p>
<input type="text" placeholder="请⼀键三连"/>
<p>password</p>
<input type="password" placeholder="请⼀键三连"/>
<input type="submit" value="login">
<a href="#">forget password</a>
</form>
</div>
</div>
</div>
</body>
body渐变
body{
background: #5D4157;
/* fallback for old browsers */
background:-webkit-linear-gradient(to right, #A8CABA, #5D4157);
/* Chrome 10-25, Safari 5.1-6 */
background:linear-gradient(to right, #A8CABA, #5D4157);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: 400%;
animation: backdiv 12s infinite;
}
@keyframes backdiv{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
登录div均分
左侧使⽤⼀个动漫图⽚作为背景，右侧为输⼊框
margin: 0 auto；居中 box-shadow: 0 20px 16px rgba(0, 0, 0, 0.5)；添加阴影
margin: 0;
padding: 0;
background: #fff;
margin: 0 auto;
box-shadow: 0 20px 16px rgba(0, 0, 0, 0.5);
}
.container .left{
float: left;
width: 50%;
height: 400px;
background:url(./background/background.jpg); background-size: cover;
box-sizing: border-box;
}
.container .right{
float: right;
width: 50%;
height:400px;
box-sizing: border-box;
}
输⼊框样式
box-sizing：border-box；规定在框内，避免跑出去
padding: 80px 40px;
box-sizing: border-box;
}
.formBox input{
width: 100%;
margin-bottom: 20px;
font-weight: bold;
color:#fff;
}
.formBox input[type="text"],
.formBox input[type="password"]{
border: none;
outline: none;
width: 100%;
margin-bottom: 20px;
border-bottom: 2px solid #a6af14;
}
.formBox input[type="text"]:focus,
.formBox input[type="password"]:focus{
border-bottom: 2px solid #000000;
}
.formBox input[type="submit"]{
border: none;
outline: none;
background: #000000;
}
.formBox .p{
font-weight: bold;
color: #fff;
}
.formBox input[type="submit"]:hover{
/* background: #fff; */
background: #a6af14;
cursor: pointer;
}
.
formBox a{
color: #000000;
}
整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #5D4157;
/* fallback for old browsers */
background:-webkit-linear-gradient(to left, #A8CABA, #5D4157); /* Chrome 10-25, Safari 5.1-6 */
background:linear-gradient(to left, #A8CABA, #5D4157);
background:linear-gradient(to left, #A8CABA, #5D4157);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ animation: backdiv 12s infinite;
background-position: 0% 50%;
background-size: 400%;
}
@keyframes backdiv{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
box sizing
background-position: 0% 50%;
}
}
.title{
text-align: center;
padding: 50px 0 20 px;
}
.title h1{
margin: 0;
padding: 0;
color: #fff;
/
* text-transform: uppercase; */
font-size: 36px;
}
.container{
width: 50%;
height: 400px;
margin: 0 auto;
border: 2 px solid #fff;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
.container .left{
float: left;
width: 50%;
height: 400px;
background:url(./img/background.jpg);
background-size: cover;
box-sizing: border-box;
}
.container .right{
float: right;
width: 50%;
height: 400px;
box-sizing: border-box;
background: #fff;
}
.formBox{
width: 100%;
padding: 80px 40px;
height: 400px;
background: #fff;
box-sizing: border-box;
/* opacity: 0.6; */
}
.
formBox .p{
margin: 0;
padding: 0;
font-weight: bold;
color: #a6af13;
}
.formBox input{
width: 100%;
margin-bottom: 20px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。