使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)_登录表单代码可辅助(3)

前端大妹纸

于 2024-05-01 09:02:54 发布

阅读量294

点赞数 19

分类专栏：程序员文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_58269070/article/details/138366624

版权

本文展示了如何使用HTML和CSS创建一个具有玻璃质感的登录表单。表单设计包括绝对定位、模糊背景过滤、圆角边框、阴影效果以及自定义字体和颜色。此外，还提供了输入字段、占位符、按钮和社交登录选项的样式。附带完整的源码，可直接用于前端项目。

摘要由CSDN通过智能技术生成

    #f09819
);
right: -30px;
bottom: -80px;

}


输出：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/dddfebf7fae64577b076099b04b9297e.png)


### 📰 第 3 步：创建玻璃态登录表单的基本结构


我们使用以下 HTML 和 CSS 代码创建了此登录表单的基本结构。这个玻璃态效果登录表单的宽度为 `400px` 和高度为 `520px`.


我在这里使用了背景颜色半透明。`Border-radius: 10px`用来让四个角变得有点圆。如果你观看演示，你将了解此登录表单背景中的颜色有点模糊。为此使用`backdrop-filter: blur (10px)`。

form{
height: 520px;
width: 400px;
background-color: rgba(255,255,255,0.13);
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
padding: 50px 35px;
}
form *{
font-family: ‘Poppins’,sans-serif;
color: #ffffff;
letter-spacing: