今日学习:制作移动端登录界面。学习时长:3h。
<main>
<main class="login-main">
<div class="container">
<h1>Welcome</h1>
<div class="from">
<input type="text" placeholder="账号">
<input type="password" placeholder="密码">
<button class="login-btn">登录</button>
<button class="logon-btn">注册</button>
</div>
</div>
<ul class="bg-squares">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</main>
</main>
.login-main{
height: 10rem;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to top left,white,lightgray,gray);
overflow: hidden;
}
.container{
text-align: center;
color :black ;
}
.container h1{
font-size: 1rem;
font-weight: 100;
letter-spacing: 2px;
margin-bottom: 0.15rem;
transition: 1s ease-in-out;
}
.from{
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
opacity: 1;
transition: opacity 0.5s;
}
.from input{
outline: none;
border: 1px solid rgba(255,255,255,0.4);
background-color: rgba(255,255,255,0.4);
width: 4.5rem;
padding: 0.14rem 0.16rem;
border-radius: 5px;
margin: 0 auto 10px auto;
text-align: center;
color:black;
font-size: 0.25rem;
transition: 0.3s;
}
.from input:hover{
background-color: white;
}
.login-btn{
position: relative;
right: 1.3rem;
outline: none;
background-color:white;
color:#ff6b19;
border:none;
width: 1.8rem;
padding: 0.14rem 0.16rem;
border-radius: 5px;
font-size: 0.24rem;
cursor: pointer;
transition: 0.25s;
}
.login-btn:hover{
background-color: #f5f7f9;
}
.logon-btn{
position: relative;
top: -0.6rem;
left: 1.3rem;
outline: none;
background-color:white;
color:#ff6b19;
border:none;
width: 1.8rem;
padding:0.14rem 0.16rem;
border-radius: 5px;
font-size: 0.24rem;
cursor: pointer;
transition: 0.25s;
}
.logon-btn:hover{
background-color: #f5f7f9;
}
/*背景动态效果*/
.bg-squares{
list-style: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-squares li{
border-radius: 5px;
width: 0.5rem;
height: 0.5rem;
background-color: rgb(130, 130, 130,0.1);
position:absolute;
top: 10rem;
animation:square 20s linear infinite;
}
.bg-squares li:nth-child(1){
left: 10%;
}
.bg-squares li:nth-child(2){
left: 20%;
width: 1rem;
height: 1rem;
animation-delay: 2s;
animation-duration: 17 s;
}
.bg-squares li:nth-child(3){
left: 60%;
animation-delay: 1s;
}
.bg-squares li:nth-child(4){
left: 40%;
width: 0.8rem;
height: 0.8rem;
background-color: rgba(255,255,255,0.4);
animation-duration: 22 s;
animation-delay: 3s;
}
.bg-squares li:nth-child(5){
left: 70%;
animation-delay: 1.2s;
animation-duration: 8s;
}
.bg-squares li:nth-child(6){
left: 80%;
width: 1.5rem;
height: 1.5rem;
background-color: rgb(255,255,255,0.2);
animation-duration: 3s;
animation-delay: 1.3s;
}
.bg-squares li:nth-child(7){
left: 70%;
width: 1.8rem;
height: 1.8rem;
animation-delay: 1.8s;
animation-duration: 7s;
}
.bg-squares li:nth-child(8){
left: 55%;
width: 0.2rem;
height: 0.2rem;
background-color: rgba(255,255,255,0.3);
animation-duration: 20s;
}
.bg-squares li:nth-child(9){
left: 25%;
width: 1.8rem;
height: 1.8rem;
animation-delay: 2s;
animation-duration: 20s;
}
.container.success h1{
transform: translateY(75px);
}
.container.success .from{
opacity: 0;
}
/*背景动画*/
@keyframes square{
0%{
transform: translateY(0);
}
100%{
transform: translateY(-120vh) rotate(600deg);
}
}