透明毛玻璃效果登录界面html代码

今天给各位分享一款比较好看的登录界面毛玻璃效果代码，需要直接拿走。

html代码

<div class="container">
<div class="bg">
<span></span>
<span></span>
<span></span>
</div>
<div class="glass">
<div class="texts">login</div>
<input type="text" placeholder="UserId">
<input type="password" placeholder="Password">
<button>→</button>
</div>
</div>

css代码

body{
background: #333;
}
.glass{
position:absolute;
width:360px;
height:480px;
top:160px;
left:220px;
border-radius:20px;
color：#eee;
background:rgba(255,255,255,0.05);
animation:am3 ease-out 1s 0.2s backwards;
}
.glass:hover{
box-shadow:inset 1px 1px 3px rgba(255,255,255,0.9),
4px 4px 25px rgba(0,0,0,0.9);
backdrop-filter:blur(7px);
}
.bg{
position:absolute;
width:800px;
height:800px;
top:0;
left:0;
animation:am2 ease-out 1s;
}
input{
background: transparent;
outline:none;
border:none;
border-bottom:1px solid #666;
width:80%;
height:45px;
color:#eee;
font-size:18px;
margin-left:34px;
margin-top:40px;
}
.texts{
display:inline-block;
font-size:26px;
margin-left:34px;
margin-top:50px;
color:#fff;
}
button{
border:none;
width:70px;
height: 70px;
border-radius:50%;
color:#eee;
font-weight: bold;
font-size: 28px;
margin-left:145px;
margin-top:71px;
cursor:pointer;
background: rgba(255,255,255,0.1);
box-shadow:0px 2px 10px #111;
}
button:hover{
width: 160px;
border-radius:70px;
margin-left:105px;
box-shadow:0px 0px 10px #999,inset 0px 0px 5px #333;
}
span{
background: #fff;
position:absolute;
top:117px;
left:143px;
width:120px;
height:120px;
border-radius:50%;
box-shadow:1px 1px 50px #000;
}
span:nth-child(1){
top: 117px;
left: 143px;
width: 120px;
height: 120px;
background: purple;
animation:am1 ease-in-out 3s infinite alternate;
}
span:nth-child(2){
top: 518px;
left: 434px;
width: 200px;
height: 200px;
background: orange;
animation:am1 ease-in-out 4s infinite alternate-reverse;
}
span:nth-child(3){
top:196px;
left:483px;
width:60px;
height:60px;
background: cyan;
animation:am1 ease-in-out 2.5s 0.5s infinite alternate;
}
.glass{
backdrop-filter:blur(4px);
box-shadow:inset 1px 1px 6px rgba(255,255,255,0.3),
2px 2px 15px rgba(0,0,0,0.5);
}
@keyframes am1{
0% {transform:translateY(0);}
100% {transform:translateY(-30px);}
}
@keyframes am2{
0% {transform:scale(0,0) rotateZ(60deg);}
100% {transform:scale(1,1) rotateZ(0);}
}
@keyframes am3{
0% {transform:translateY(8px) opacity:0;}
100% {transform:translateY(0) opacity:1;}
}