html5文本框特效,html

css

html,

body {

background-color: #F4F4F4;

display: flex;

width: 100%;

height: 100%;

align-items: center;

font-family: "Work Sans", sans-serif;

justify-content: center;

}

.exp-container {

width: 100%;

padding: 30px;

box-sizing: border-box;

max-width: 600px;

}

.exp {

display: flex;

flex-direction: column-reverse;

width: 100%;

margin-bottom: 30px;

position: relative;

flex-wrap: wrap;

}

.exp__label {

transition: 0.3s;

margin-bottom: 5px;

}

.exp__label:before {

content: attr(data-icon);

font-weight: normal;

font-family: "Ionicons";

font-size: 24px;

position: absolute;

left: 0;

transform: rotateY(90deg);

bottom: 0;

height: 52px;

background: transparent;

color: #000;

transform-origin: left;

display: flex;

align-items: center;

justify-content: center;

transition: color .3s 0s ease, transform .3s 0s ease;

width: 42px;

}

.exp__input {

border: 1px solid #ddd;

padding: 0 10px;

width: 100%;

height: 52px;

transition: 0.3s;

font-weight: normal;

box-sizing: border-box;

font-family: "Work Sans", sans-serif;

outline: none;

}

.exp__input:focus {

padding-left: 42px;

border-color: #bbb;

}

.exp__input:focus + label:before {

transform: rotateY(0deg);

}

.exp__input:valid {

padding-left: 42px;

border-color: green;

}

.exp__input:valid + label {

color: green;

}

.exp__input:valid + label:before {

transform: rotateY(0deg);

color: green;

font-size: 34px;

content: attr(data-icon-ok);

}

.exp-title {

text-align: center;

font-size: 22px;

margin-bottom: 30px;

font-weight: normal;

}

.exp-title span {

display: inline-block;

padding: 5px;

font-size: 22px;

background: #feffd4;

}