这两款输入框样式是在微信公众号程序员大澈看到的,原文提供了Vue组件实现。本页面将其改写为纯CSS实现,方便在各种Web项目中直接使用。
/* 波浪输入框样式 */
.wave-group {
position: relative;
margin: 30px auto;
width: 280px;
}
.wave-group .input {
font-size: 16px;
padding: 12px 15px 12px 15px;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #515151;
background: transparent;
box-sizing: border-box;
height: 50px;
}
.wave-group .input:focus {
outline: none;
}
.wave-group .label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
display: flex;
}
.wave-group .label-char {
transition: 0.2s ease all;
transition-delay: calc(var(--index) * .05s);
}
.wave-group .input:focus~.label .label-char,
.wave-group .input:valid~.label .label-char {
transform: translateY(-20px);
font-size: 14px;
color: #5264AE;
}
.wave-group .bar {
position: relative;
display: block;
width: 100%;
}
.wave-group .bar:before,
.wave-group .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.wave-group .bar:before {
left: 50%;
}
.wave-group .bar:after {
right: 50%;
}
.wave-group .input:focus~.bar:before,
.wave-group .input:focus~.bar:after {
width: 50%;
}
/* 渐变边框输入框样式 */
.form-control {
position: relative;
margin: 30px auto;
width: 280px;
}
.input {
color: #685b5b;
font-size: 0.9rem;
background-color: transparent;
width: 100%;
box-sizing: border-box;
padding-inline: 0.5em;
padding-block: 0.7em;
border: none;
border-bottom: var(--border-height) solid var(--border-before-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.input-border {
position: absolute;
background: var(--border-after-color);
width: 0%;
height: 2px;
bottom: 0;
left: 0;
transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.input:focus {
outline: none;
}
.input:focus+.input-border {
width: 100%;
}
.input-alt {
font-size: 16px;
padding: 12px 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #333;
background-color: #f5f5f5;
height: 50px;
box-sizing: border-box;
}
.input-border-alt {
height: 3px;
background: linear-gradient(90deg, #FF6464 0%, #FFBF59 50%, #47C9FF 100%);
transition: width 0.4s cubic-bezier(0.42, 0, 0.58, 1.00);
}
.input-alt:focus+.input-border-alt {
width: 100%;
}