HTML5设计风格,HTML5 原质化设计风格的信息输入框

CSS

语言：

CSSSCSS

确定

body {

background-color: #6d5959;

}

body * {

font-family: 'Montserrat' sans-serif;

}

.wrap {

width: 450px;

margin: 0 auto;

}

.mat-label {

display: block;

font-size: 16px;

transform: translateY(25px);

color: #e2e2e2;

transition: all 0.5s;

}

.mat-input {

position: relative;

background: transparent;

width: 100%;

border: none;

outline: none;

padding: 8px 0;

font-size: 16px;

}

.mat-div {

padding: 30px 0 0 0;

position: relative;

}

.mat-div:after,

.mat-div:before {

content: "";

position: absolute;

display: block;

width: 100%;

height: 2px;

background-color: #e2e2e2;

bottom: 0;

left: 0;

transition: all 0.5s;

}

.mat-div::after {

background-color: #8e8dbe;

transform: scaleX(0);

}

.is-active::after {

transform: scaleX(1);

}

.is-active .mat-label {

color: #8e8dbe;

}

.is-completed .mat-label {

font-size: 12px;

transform: translateY(0);

}

button {

background-color: #93e1d8;

border: none;

display: block;

margin: 35px auto;

padding: 15px 30px;

border-radius: 10px;

cursor: pointer;

}