一个简单的HTML毛玻璃登录页面
效果图片
其中图片可更改CSS样式表中的URL替换成自己喜欢或符合项目的图片
下面是H5的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<form action="#" class="login-from">
<h2>登录</h2>
<input type="text" name="userName" placeholder="用户名">
<input type="password" placeholder="密码">
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
下面是CSS代码
html,body{
margin: 0;
font-family: "PingFang SC","Microsoft Yanhei",sans-serif;
}
.container{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: url(../img/iTab-dpzww3.jpg) fixed no-repeat;
background-size: cover;
}
.login-from{
width: 240px;
height: 220px;
display: flex;
flex-direction: column;
padding: 40px;
text-align: center;
position: relative;
z-index: 100;
background: inherit;
border-radius: 18px;
overflow: hidden;
}
.login-from::before{
content: "";
width: calc(100% + 20px);
height: calc(100% + 20px);
position: absolute;
top: -10px;
left: -10px;
overflow: hidden;
background: inherit;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.4);
filter: blur(5px);
z-index: -1;
}
.login-from h2{
font-size: 18px;
font-weight: 400;
color: #3d5245;
}
.login-from input,
.login-from button{
margin: 6px 0;
height: 36px;
border: none;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 4px;
padding: 0 14px;
color: #3d5245;
}
.login-from input::placeholder{
color: #3d5245;
}
.login-from button:focus,
.login-from input:focus{
outline: 0;
}
.login-from button{
margin-top: 24px;
background-color: rgba(2209, 179, 9, 0.4);
color: white;
position: relative;
overflow: hidden;
cursor: pointer;
transition: 0.4s;
}
.login-from button:hover{
background-color: rgba(209, 179, 9, 0.7);
}
.login-from button::before,
.login-from button::after{
content: "";
display: block;
width: 80px;
height: 100%;
background: rgba(179, 255, 210, 0.5);
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
transform: skewX(-15deg);
filter: blur(30px);
overflow: hidden;
transform: translateX(-100px);
}
.login-from button::after{
width: 40px;
background: rgba(179, 255, 210, 0.3);
left: 60px;
opacity: 0;
filter: blur(5px);
}
.login-from button:hover::before{
transition: 1s;
transform: translateX(320px);
opacity: 0.7s;
}
.login-from button:hover::after{
transition: 1s;
transform: translateX(320px);
opacity: 1s;
}
这个是看一个视频博主写的自己跟着模范写了一下分享给大家认为有用的话点个关注支持一下!后期会分享更多有用的教程包括解决一些程序中出现的Bug如何去解决以及避免!如有代码中有哦问题也可以联系我帮忙解决!共同学习.