<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>毛玻璃效果</title>
</head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.login {
position: relative;
width: 100%;
height: 100%;
background: url('./微信图片_20230202143139.jpg') no-repeat;
background-size: 100% 100%;
}
.login-box {
width: 500px;
height: 300px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
backdrop-filter: blur(10px);
padding: 50px 40px;
box-sizing: border-box;
}
.userName,
.userPwd,
.subBtn {
width: 420px;
height: 50px;
background: #fff;
margin-bottom: 30px;
border-radius: 8px;
}
.subBtn {
margin-bottom: 0;
background: #4051b5;
}
#email,
#password,
#btn {
width: 420px;
height: 100%;
border: none;
outline: none;
padding: 0 12px;
box-sizing: border-box;
border-radius: 8px;
}
#btn {
background: #4051b5;
color: #fff;
font-size: 17px;
}
</style>
<body>
<div class="login">
<div class="login-box">
<div class="userName">
<input type="email" name="user_email" id="email" placeholder="email">
</div>
<div class="userPwd">
<input type="password" name="user_password" id="password" placeholder="password">
</div>
<div class="subBtn">
<input type="button" id="btn" value="登录" onclick="submit()">
</div>
</div>
</div>
</body>
<script>
</script>
</html>
毛玻璃效果
最新推荐文章于 2024-09-29 21:22:01 发布