最新使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)(2)

bottom: -80px;

}

输出：

📰 第 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: 0.5px;

outline: none;

border: none;

}

输出：

📲 第 4 步：向表单添加标题

---

现在使用这些代码我在表单中创建了一个标