效果演示
实现了一个简单的数字密码输入表单，用户需要输入一个4位数字密码来验证身份。表单包含一个标题、描述、输入字段、两个按钮和一个关闭按钮。输入字段是一个4位数字密码，用户需要在每个输入框中输入数字来输入密码。两个按钮分别是“验证”和“清除”，用户可以点击这两个按钮来进行验证和清除操作。关闭按钮用于关闭表单。整个表单的样式和布局都比较简洁明了，适合在需要输入密码的场景中使用。
Code
<form class="form">
<span class="close">X</span>
<div class="info">
<span class="title">Two-Factor Verification</span>
<p class="description">Enter the two-factor authentication code provided by the authenticator app </p>
</div>
<div class="input-fields">
<input maxlength="1" type="tel" placeholder="">
<input maxlength="1" type="tel" placeholder="">
<input maxlength="1" type="tel" placeholder="">
<input maxlength="1" type="tel" placeholder="">
</div>
<div class="action-btns">
<a href="#" class="verify">Verify</a>
<a href="#" class="clear">Clear</a>
</div>
</form>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #e8e8e8;
}
.form {
--black: #000000;
--ch-black: #141414;
--eer-black: #1b1b1b;
--night-rider: #2e2e2e;
--white: #ffffff;
--af-white: #f3f3f3;
--ch-white: #e1e1e1;
--tomato: #fa5656;
font-family: Helvetica, sans-serif;
padding: 25px;
display: flex;
max-width: 420px;
flex-direction: column;
align-items: center;
overflow: hidden;
color: var(--af-white);
background-color: var(--black);
border-radius: 8px;
position: relative;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .1);
}
/*----heading and description-----*/
.info {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.title {
font-size: 1.5rem;
font-weight: 900;
}
.description {
margin-top: 10px;
font-size: 1rem;
}
/*----input-fields------*/
.form .input-fields {
display: flex;
justify-content: space-between;
gap: 10px;
}
.form .input-fields input {
height: 2.5em;
width: 2.5em;
outline: none;
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 1.5rem;
color: var(--af-white);
border-radius: 5px;
border: 2.5px solid var(--eer-black);
background-color: var(--eer-black);
}
.form .input-fields input:focus {
border: 1px solid var(--af-white);
box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .15);
transform: scale(1.05);
transition: 0.5s;
}
/*-----verify and clear buttons-----*/
.action-btns {
display: flex;
margin-top: 20px;
gap: 0.5rem;
}
.verify {
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-size: 1rem;
font-weight: 500;
color: var(--night-rider);
text-shadow: none;
background: var(--af-white);
box-shadow: transparent;
border: 1px solid var(--af-white);
transition: 0.3s ease;
user-select: none;
}
.verify:hover,
.verify:focus {
color: var(--night-rider);
background: var(--white);
}
.clear {
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-size: 1rem;
font-weight: 500;
color: var(--ch-white);
text-shadow: none;
background: transparent;
border: 1px solid var(--ch-white);
transition: 0.3s ease;
user-select: none;
}
.clear:hover,
.clear:focus {
color: var(--tomato);
background-color: transparent;
border: 1px solid var(--tomato);
}
/*-----close button------*/
.close {
position: absolute;
right: 10px;
top: 10px;
background-color: var(--night-rider);
color: var(--ch-white);
height: 30px;
width: 30px;
display: grid;
place-items: center;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
transition: .5s ease;
}
.close:hover {
background-color: var(--tomato);
color: var(--white);
}
实现思路拆分
cbody {
height: 100vh; /* 设置整个页面的高度为视口高度 */
display: flex; /* 设置元素为flex布局 */
justify-content: center; /* 设置主轴方向上的对齐方式为居中对齐 */
align-items: center; /* 设置交叉轴方向上的对齐方式为居中对齐 */
background-color: #e8e8e8; /* 设置背景颜色为浅灰色 */
}
这段代码设置了整个页面的样式，包括高度、布局方式、对齐方式和背景颜色。
.form {
--black: #000000; /* 设置黑色变量 */
--ch-black: #141414; /* 设置深灰色变量 */
--eer-black: #1b1b1b; /* 设置中灰色变量 */
--night-rider: #2e2e2e; /* 设置深黑色变量 */
--white: #ffffff; /* 设置白色变量 */
--af-white: #f3f3f3; /* 设置亮白色变量 */
--ch-white: #e1e1e1; /* 设置中白色变量 */
--tomato: #fa5656; /* 设置番茄红色变量 */
font-family: Helvetica, sans-serif; /* 设置字体 */
padding: 25px; /* 设置内边距 */
display: flex; /* 设置元素为flex布局 */
max-width: 420px; /* 设置最大宽度为420px */
flex-direction: column; /* 设置主轴方向为垂直方向 */
align-items: center; /* 设置交叉轴方向上的对齐方式为居中对齐 */
overflow: hidden; /* 设置内容溢出时隐藏滚动条 */
color: var(--af-white); /* 设置文本颜色为亮白色 */
background-color: var(--black); /* 设置背景颜色为黑色 */
border-radius: 8px; /* 设置圆角半径为8px */
position: relative; /* 设置元素为相对定位 */
box-shadow: 10px 10px 10px rgba(0, 0, 0,.1); /* 设置阴影效果 */
}
这段代码设置了表单的样式，包括变量、字体、内边距、布局方式、对齐方式、溢出处理、文本颜色、背景颜色、圆角半径、定位和阴影效果。
.info {
margin-bottom: 20px; /* 设置下边距为20px */
display: flex; /* 设置元素为flex布局 */
flex-direction: column; /* 设置主轴方向为垂直方向 */
align-items: center; /* 设置交叉轴方向上的对齐方式为居中对齐 */
text-align: center; /* 设置文本对齐方式为居中对齐 */
}
这段代码设置了标题和描述的样式，包括下边距、布局方式、对齐方式和文本对齐方式。
.title {
font-size: 1.5rem; /* 设置字体大小为1.5rem */
font-weight: 900; /* 设置字体粗细为900 */
}
这段代码设置了标题的样式，包括字体大小和字体粗细。
.description {
margin-top: 10px; /* 设置上边距为10px */
font-size: 1rem; /* 设置字体大小为1rem */
}
这段代码设置了描述的样式，包括上边距和字体大小。
.form.input-fields {
display: flex; /* 设置元素为flex布局 */
justify-content: space-between; /* 设置主轴方向上的对齐方式为两端对齐 */
gap: 10px; /* 设置两个输入框之间的间距为10px */
}
这段代码设置了输入框的样式，包括布局方式、对齐方式和间距。
.form.input-fields input {
height: 2.5em; /* 设置输入框高度为2.5em */
width: 2.5em; /* 设置输入框宽度为2.5em */
outline: none; /* 去掉输入框的外边框 */
text-align: center; /* 设置文本对齐方式为居中对齐 */
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; /* 设置字体 */
font-size: 1.5rem; /* 设置字体大小为1.5rem */
color: var(--af-white); /* 设置文本颜色为亮白色 */
border-radius: 5px; /* 设置圆角半径为5px */
border: 2.5px solid var(--eer-black); /* 设置输入框的边框为2.5px的黑色实线 */
background-color: var(--eer-black); /* 设置输入框的背景颜色为黑色 */
}
这段代码设置了输入框的样式，包括高度、宽度、外边框、文本对齐方式、字体、字体大小、文本颜色、圆角半径、边框和背景颜色。
.form.input-fields input:focus {
border: 1px solid var(--af-white); /* 设置输入框获得焦点时的边框为1px的亮白色实线 */
box-shadow: inset 10px 10px 10px rgba(0, 0, 0,.15); /* 设置输入框获得焦点时的阴影效果 */
transform: scale(1.05); /* 放大输入框 */
transition: 0.5s; /* 设置过渡效果持续时间为0.5s */
}
这段代码设置了输入框获得焦点时的样式，包括边框、阴影效果、放大效果和过渡效果。
.action-btns {
display: flex; /* 设置元素为flex布局 */
margin-top: 20px; /* 设置上边距为20px */
gap: 0.5rem; /* 设置两个按钮之间的间距为0.5rem */
}
这段代码设置了按钮的样式，包括布局方式、上边距和间距。
.verify {
padding: 10px 20px; /* 设置按钮的内边距为10px 20px */
text-decoration: none; /* 去掉链接的下划线 */
border-radius: 5px; /* 设置按钮的圆角半径为5px */
font-size: 1rem; /* 设置字体大小为1rem */
font-weight: 500; /* 设置字体粗细为500 */
color: var(--night-rider); /* 设置文本颜色为深黑色 */
text-shadow: none; /* 去掉文本阴影 */
background: var(--af-white); /* 设置按钮的背景颜色为亮白色 */
box-shadow: transparent; /* 去掉按钮的阴影 */
border: 1px solid var(--af-white); /* 设置按钮的边框为1px的亮白色实线 */
transition: 0.3s ease; /* 设置过渡效果 */
user-select: none; /* 禁止用户选择按钮文本 */
}
这段代码设置了“验证”按钮的样式，包括内边距、文本装饰、圆角半径、字体大小、字体粗细、文本颜色、文本阴影、背景颜色、阴影、边框、过渡效果和用户选择。
.verify:hover,
.verify:focus {
color: var(--night-rider); /* 设置文本颜色为深黑色 */
background: var(--white); /* 设置按钮的背景颜色为白色 */
border: 1px solid var(--af-white); /* 设置按钮的边框为1px的亮白色实线 */
}
这段代码设置了“验证”按钮在鼠标悬停或获得焦点时的样式，包括文本颜色、背景颜色和边框。
.clear {
padding: 10px 20px; /* 设置内边距为上下各10px，左右各20px */
text-decoration: none; /* 去除文本装饰 */
border-radius: 5px; /* 设置圆角半径为5px */
font-size: 1rem; /* 设置字体大小为1rem */
font-weight: 500; /* 设置字体粗细为500 */
color: var(--ch-white); /* 设置文本颜色为中白色 */
text-shadow: none; /* 去除文本阴影 */
background: transparent; /* 去除背景 */
border: 1px solid var(--ch-white); /* 设置边框为1px粗中白色 */
transition: 0.3s ease; /* 设置过渡效果 */
user-select: none; /* 禁止用户选择文本 */
}
这段代码设置了清除按钮的样式，包括内边距、圆角半径、字体大小、字体粗细、文本颜色、文本阴影、背景、边框和过渡效果等。
.clear:hover,
.clear:focus {
color: var(--tomato); /* 设置文本颜色为番茄红色 */
background-color: transparent; /* 去除背景颜色 */
border: 1px solid var(--tomato); /* 设置边框为1px粗番茄红色 */
}
这段代码设置了清除按钮在鼠标悬停或获得焦点时的样式，包括文本颜色、背景颜色和边框颜色等。
.close {
position: absolute; /* 设置元素为绝对定位 */
right: 10px; /* 设置右边距为10px */
top: 10px; /* 设置上边距为10px */
background-color: var(--night-rider); /* 设置背景颜色为深黑色 */
color: var(--ch-white); /* 设置文本颜色为中白色 */
height: 30px; /* 设置高度为30px */
width: 30px; /* 设置宽度为30px */
display: grid; /* 设置元素为网格布局 */
place-items: center; /* 设置交叉轴方向上的对齐方式为居中对齐 */
border-radius: 5px; /* 设置圆角半径为5px */
cursor: pointer; /* 设置鼠标指针为指针 */
font-weight: 600; /* 设置字体粗细为600 */
transition:.5s ease; /* 设置过渡效果 */
}
这段代码设置了关闭按钮的样式，包括位置、大小、背景颜色、文本颜色、圆角半径、鼠标指针、字体粗细和过渡效果等。
.close:hover {
background-color: var(--tomato); /* 设置背景颜色为番茄红色 */
color: var(--white); /* 设置文本颜色为白色 */
}
这段代码设置了关闭按钮在鼠标悬停时的样式，包括背景颜色和文本颜色等。
