每日总结
今天又写了一个增删改查，但是还是不会自己设计着写，还是得多练。
一直写spring项目好无聊，所以我找了一个看起来还不错的css样式学习，是个登录界面，晚些时间把图片粘过来。作者的思路我觉得还是很厉害的，有动态效果的，可以自己玩一玩，代码写在下面了
代码：
页面：index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>magical login html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<div class="container">
<div class="user signinBx">
<div class="imgBx"><img src="image\shuping.jpg"></div>
<div class="formBx">
<form>
<h2>Sign In</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="submit" value="Login">
<p class="signup">Don't have an account <a href="#" onclick="toggleForm();">Sign up.</a></p>
</form>
</div>
</div>
<div class="user signupBx">
<div class="formBx">
<form>
<h2>Create an account</h2>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email Address">
<input type="password" placeholder="Create Password">
<input type="password" placeholder="Confirm Password">
<input type="submit" value="Sign Up">
<p class="signup">Already have an account <a href="#" onclick="toggleForm();">Sign in.</a></p>
</form>
</div>
<div class="imgBx"><img src="image\anny.jpg"></div>
</div>
</div>
</section>
<script>
function toggleForm(){
section =document.querySelector('section');
container =document.querySelector('.container');
container.classList.toggle('active');
section.classList.toggle('active');
}
</script>
</body>
</html>
样式：style
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
section
{
position: relative;
min-height: 100vh;
background:#99bbdf;
display: flex;
justify-content: center;
align-self: center;
padding: 125px;
transition: 0.5s;
}
section.active
{
background: #fef7ed;
}
section .container
{
position: relative;
width: 800px;
height: 500px;
background: #fff;
box-shadow: 0 15px 50px rgba(0,0,0,0.1);
overflow: hidden;
}
section .container .user
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
}
section .container .user .imgBx
{
position: relative;
width: 50%;
height: 100%;
transition: 0.5;
}
section .container .user .imgBx img
{
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 500px;
object-fit: cover;
}
section .container .user .formBx
{
position: relative;
width: 50%;
height: 100%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
transition: 0.5s;
}
section .container .user .formBx h2
{
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
width: 100%;
margin-bottom: 10px;
color: #555;
}
section .container .user .formBx input
{
width: 100%;
padding: 10px;
background: #f5f5f5;
color: #333;
border: none;
outline: none;
box-shadow: none;
margin: 8px 0;
letter-spacing: 1px;
font-weight: 300;
}
section .container .user .formBx input[type="submit"]
{
max-width: 100px;
background: #677eff;
color: #fff;
cursor: pointer;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
transition: 0.5s;
}
section .container .user.signupBx .formBx input[type="submit"]
{
background: #e73e49;
}
section .container .user .formBx .signup
{
position: relative;
margin-top: 20px;
font-size: 12px ;
letter-spacing: 1px;
color: #555;
text-transform: uppercase;
font-weight: 300;
}
section .container .user .formBx .signup a
{
font-weight: 600;
text-decoration: none;
color: #577eff;
}
section .container .signupBx
{
pointer-events: none;
}
section .container.active .signupBx
{
pointer-events: initial;
}
section .container .signupBx .formBx
{
top: 100%;
}
section .container.active .signupBx .formBx
{
top: 0;
}
section .container .signupBx .imgBx
{
top: -100%;
transition: 0.5s;
}
section .container.active .signupBx .imgBx
{
top: 0;
}
section .container .signinBx .formBx
{
top: 0;
}
section .container.active .signinBx .formBx
{
top: 100%;
}
section .container .signinBx .imgBx
{
top: 0;
transition: 0.5s;
}
section .container.active .signinBx .imgBx
{
top: -100%;
}
@media (max-width: 991px)
{
section .container{
max-width: 400px;
}
section .container .imgBx
{
display: none;
}
section .container .user .formBx
{
width: 100% ;
}
}
浙公网安备 33010602011771号