première méthode :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
font-family: JetBrains Mono Medium;
display: flex;
align-items: center;
justify-content: center;
/* background-color: #0e92b3; */
background: url('img/city.png') no-repeat;
background-size: 100% 100%;
}
.form-wrapper {
width: 300px;
background-color: rgba(41, 45, 62, .8);
color: #fff;
border-radius: 2px;
padding: 50px;
}
.form-wrapper .header {
text-align: center;
font-size: 35px;
text-transform: uppercase;
line-height: 100px;
}
.form-wrapper .input-wrapper input {
background-color: rgb(41, 45, 62);
border: 0;
width: 100%;
text-align: center;
font-size: 15px;
color: #fff;
outline: none;
}
.form-wrapper .input-wrapper input::placeholder {
text-transform: uppercase;
}
.form-wrapper .input-wrapper .border-wrapper {
background-image: linear-gradient(to right, #e8198b, #0eb4dd);
width: 100%;
height: 50px;
margin-bottom: 20px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.form-wrapper .input-wrapper .border-wrapper .border-item {
height: calc(100% - 4px);
width: calc(100% - 4px);
border-radius: 30px;
}
.form-wrapper .action {
display: flex;
justify-content: center;
}
.form-wrapper .action .btn {
width: 60%;
text-transform: uppercase;
border: 2px solid #0e92b3;
text-align: center;
line-height: 50px;
border-radius: 30px;
cursor: pointer;
}
.form-wrapper .action .btn:hover {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.form-wrapper .icon-wrapper {
text-align: center;
width: 60%;
margin: 0 auto;
margin-top: 20px;
border-top: 1px dashed rgb(146, 146, 146);
padding: 20px;
}
.form-wrapper .icon-wrapper i {
font-size: 20px;
color: rgb(187, 187, 187);
cursor: pointer;
border: 1px solid #fff;
padding: 5px;
border-radius: 20px;
}
.form-wrapper .icon-wrapper i:hover {
background-color: #0e92b3;
}
</style>
</head>
<body>
<div class="form-wrapper">
<div class="header">
login
</div>
<div class="input-wrapper">
<div class="border-wrapper">
<input type="text" name="username" placeholder="username" class="border-item" autocomplete="off">
</div>
<div class="border-wrapper">
<input type="password" name="password" placeholder="password" class="border-item" autocomplete="off">
</div>
</div>
<div class="action">
<div class="btn">login</div>
</div>
<div class="icon-wrapper">
<i class="iconfont icon-weixin"></i>
<i class="iconfont icon-qq"></i>
<i class="iconfont icon-git"></i>
</div>
</div>
</body>
</html>
Image d'effet :
Deuxième méthode :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url('img/city.png') no-repeat;
background-size: 100% auto;
}
#login_box {
width: 20%;
height: 400px;
background-color: #00000060;
margin: auto;
margin-top: 10%;
text-align: center;
border-radius: 10px;
padding: 50px 50px;
}
#login_box input,
#login_box button {
outline: none;
}
#login_box h2 {
color: #ffffff90;
margin-top: 5%;
}
#login_box #form #input_box {
margin-top: 5%;
}
#login_box #form #input_box input {
border: 0;
width: 60%;
font-size: 15px;
color: #ffffff;
background: #ffffff00;
border-bottom: 2px solid #ffffff;
padding: 5px 10px;
margin-top: 10px;
}
#login_box button {
margin-top: 50px;
width: 40%;
height: 20px;
border-radius: 10px;
border: 0;
color: #fff;
font-size: 15px;
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
cursor: pointer;
}
#login_box #sign_up {
margin-top: 45%;
}
#login_box #sign_up a {
color: #b94648;
}
</style>
</head>
<body>
<div id="login_box">
<h2>LOGIN</h2>
<div id="form">
<div id="input_box">
<input type="text" placeholder="Username">
</div>
<div id="input_box">
<input type="password" placeholder="Password">
</div>
</div>
<button id="sign_in">Sign in</button>
<br>
<div id="sign_up">
<a href="javascript:;">忘记密码?</a>
</div>
</div>
</body>
</html>
Rendu :
ressources d'image d'arrière-plan :
