前端布局小案例，如何创建漂亮的毛玻璃输入表单卡片效果
前端布局小案例，如何创建漂亮的毛玻璃输入表单卡片效果
转载说明：原创不易，未经授权，谢绝任何形式的转载
在当今互联网时代，用户体验是至关重要的。当我们在设计网站或应用程序时，一个漂亮、吸引人的界面往往是吸引用户并提高用户满意度的关键因素之一。而一个好看的表单则可以提高用户提交的意愿和效率。
本文将介绍如何使用HTML和CSS创建一个漂亮的毛玻璃输入表单卡片效果，以提高用户的体验和满意度。让我们开始吧！
HTML部分
首先，我们需要决定合适的字体。在我的例子中，我使用的是 Space Mono，你也可以使用 Roboto 或 Poppins。让我们将其导入到你的 HTML 中。
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet" />现在是时候使用 HTML 创建结构了。
<body>
<!-- 背景圆形容器 -->
<div class="circles">
<!-- 背景圆形1 -->
<div class="circle circle-1"></div>
<!-- 背景圆形2 -->
<div class="circle circle-2"></div>
</div>
<!-- 输入容器 -->
<div class="container">
<!-- 标题 -->
<h1>Enter Your Card Details</h1>
<!-- 卡片容器 -->
<div class="card">
<!-- 卡片 logo -->
<img class="logo" src="visa.png" />
<!-- 卡片号码 -->
<label>Card Number</label>
<input class="card-number" placeholder="1234 1234 1234 1234" type="text" required maxlength="16" />
<!-- 卡片详细信息容器 -->
<div class="container2">
<!-- 卡片持有人名字 -->
<div class="name">
<label>Card Holder</label>
<input class="card-name" placeholder="ISRAEL ISRAELI" type="text" required />
</div>
<!-- 卡片过期日期 -->
<div class="expiration-date">
<label>Exp. Date</label>
<input class="card-name" placeholder="10/25" type="text" maxlength="5" required />
</div>
<!-- 卡片 CCV 码 -->
<div class="ccv">
<label>CCV</label>
<input class="card-name" placeholder="123" type="text" maxlength="3" required />
</div>
</div>
</div>
</div>
</body>
布局代码详细解释（如果你很熟悉了，请忽略）：
- div 标签（class="card"）：这是一个用于显示卡片详细信息的容器，它包含一个 logo 图像和卡片详细信息的输入字段。
- img 标签：这是一个用于显示卡片公司的 logo 图像。
- label 标签：这是一个用于指示输入字段的标签，它包含在输入字段之前。
- input 标签（class="card-number"）：这是一个用于输入卡片号码的文本框，它有一个占位符，指示用户输入正确的卡片号码，必填，最大长度为16。
- div 标签（class="container2"）：这是一个包含卡片详细信息的容器，包含了卡片持有人、过期日期和 CCV 码。
- div 标签（class="name"）：这是一个包含输入卡片持有人名字的容器，它包含一个标签和一个输入字段。
- input 标签（class="card-name"）：这是一个用于输入卡片持有人名字的文本框，必填。
- div 标签（class="expiration-date"）：这是一个包含输入卡片过期日期的容器，它包含一个标签和一个输入字段。
- input 标签（class="card-name"）：这是一个用于输入卡片过期日期的文本框，必填，最大长度为5。
- div 标签（class="ccv"）：这是一个包含输入卡片 CCV 码的容器，它包含一个标签和一个输入字段。
- input 标签（class="card-name"）：这是一个用于输入卡片 CCV 码的文本框，必填，最大长度为3。
关键的CSS部分
现在让我们深入研究 CSS。
现在，首先是背景圆形。我们必须将 border-radius 设为 50%，以使其成为圆形。
.circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(120deg, #1d976c, #2c3e50);
}接下来是输入框样式的设置：
- 对于输入框，我们需要使用 Mono Space 字体和底部边框来获得白色下划线。
- 占位符是提供输入格式细节的最佳方式。
input {
font-family: "Space Mono", monospace;
border: none;
font-size: 16px;
height: 26px;
color: #ffffff;
background: 0;
padding: 0;
width: 0;
border-bottom: 1px solid white;
color: white
}接下来标签设置（label），主要是要设置字体大小和字体。
label {
color: white;
font-size: 12px;
font-weight: normal;
font-family: "Space Mono", monospace;
pointer-events: none;
display: block;
padding-bottom: 2px;
}最后我们设置 card 容器的外观和布局
现在是最主要、最有趣的部分，如何使卡片看起来像玻璃。为此，我们只需要三个属性：backdrop-filter: blur(35px)、border: 2px solid rgba(255, 255, 255, 0.1)、box-shadow: 0 0 80px rgba(0, 0, 0, 0.25)。
backdrop-filter 属性将使卡片后面的内容模糊不清。
然后是 border 属性，它将给它一个漂亮的边框和描边。
现在最后但并非最不重要的是，我们要设置 box-shadow 属性，这将产生一个漂亮而干净的阴影效果。
.card {
display: flex;
flex-direction: column;
height: 280px;
width: 420px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(35px);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
padding: 20px 30px 30px 30px;
overflow: hidden;
}最后贴出完整的CSS代码
* {
margin: 0;
padding: 0;
}
h1 {
font-family: "Poppins", sans-serif;
font-size: 30px;
font-weight: 300;
padding-left: 30px;
padding-bottom: 20px;
color: #ffffff;
width: 420px;
line-height: 1.5em;
text-align: left;
}
textarea:focus,
input:focus {
outline: none;
}
html,
body {
height: 100%;
width: 100%;
}
body {
font-family: "Space Mono", monospace;
background-color: rgb(240, 244, 247);
background: linear-gradient(-70deg, #202020, #000000);
margin: 0;
}
.circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(120deg, #1d976c, #2c3e50);
}
.circles {
position: absolute;
height: 270px;
width: 450px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.circle-1 {
height: 300px;
width: 300px;
top: 100px;
left: -50px;
opacity: 0.8;
}
.circle-2 {
height: 240px;
width: 240px;
bottom: 40px;
right: -100px;
opacity: 0.8;
}
.card {
display: flex;
flex-direction: column;
height: 280px;
width: 420px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(35px);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
padding: 20px 30px 30px 30px;
overflow: hidden;
}
.logo {
height: 80px;
width: 100px;
margin-bottom: 20px;
}
.card-number {
font-size: 30px;
font-family: "Space Mono", monospace;
width: 100%;
height: 50px;
margin-bottom: 40px;
}
.card-number::placeholder {
color: #b5b5b5;
font-size: 30px;
font-family: "Space Mono", monospace;
}
input::placeholder {
color: #b5b5b5;
font-family: "Space Mono", monospace;
}
.name {
font-family: "Space Mono", monospace;
padding: 0px 80px 0px 0px;
margin-right: 40px;
width: 100px;
position: relative;
display: inline-block;
overflow: hidden;
}
.expiration-date {
font-family: "Space Mono", monospace;
padding: 0px 0px 0px 0px;
margin-right: 60px;
width: 80px;
position: relative;
display: inline-block;
overflow: hidden;
}
.ccv {
font-family: "Space Mono", monospace;
padding: 0px 0px 0px 0px;
margin-right: 0px;
width: 60px;
position: relative;
display: inline-block;
overflow: hidden;
}
input {
font-family: "Space Mono", monospace;
border: none;
font-size: 16px;
height: 26px;
color: #ffffff;
background: 0;
padding: 0;
width: 0;
border-bottom: 1px solid white;
color: white;
}
label {
color: white;
font-size: 12px;
font-weight: normal;
font-family: "Space Mono", monospace;
pointer-events: none;
display: block;
padding-bottom: 2px;
}
.card-name {
color: white;