html表单占位符,HTML5 输入表单动效 - 占位符上浮

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Raleway:200,500,700,800);

@import url(https://fonts.googleapis.com/css?family=Lato);

*,

*:after,

*:before {

box-sizing: border-box;

}

body {

background: #111;

font-weight: 500;

font-size: 1.05em;

font-family: 'Raleway', Arial, sans-serif;

}

#container {

position: absolute;

width: 710px;

height: 5em;

left: 50%;

top: 50%;

margin-left: -355px;

margin-top: -2.5em;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-align-content: center;

-ms-flex-line-pack: center;

align-content: center;

}

.input {

position: relative;

margin: 1em;

width: calc(50% - 2em);

height: 80px;

}

.message {

width: calc(100% - 2em);

height: 200px;

}

textarea {

border: none;

resize: none;

}

.input__field {

position: absolute;

margin: 0.8em 0;

padding: 0.4em;

width: 100%;

height: calc(100% - 1.6em);

border: none;

border-radius: 0;

background: transparent;

color: #fc0;

font-size: 1.55em;

/* for box shadows to show on iOS */

font-weight: bold;

-webkit-appearance: none;

}

.input__field:focus {

outline: none;

}

.input__label {

position: absolute;

padding: 0 1em;

margin: 1.2em 0;

width: 100%;

height: calc(100% - 2.4em);

color: #6a7989;

font-weight: bold;

font-size: 70.25%;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-webkit-touch-callout: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.input__label-content {

position: relative;

display: block;

padding: 1.5em 0;

width: 100%;

-webkit-transition: -webkit-transform 0.3s;

transition: transform 0.3s;

}

.input__label::before,

.input__label:after {

content: '';

position: absolute;

left: 0;

width: 100%;

height: 2px;

background: #6a7989;

-webkit-transition: -webkit-transform 0.3s;

transition: transform 0.3s;

}

.input__label::before {

top: 0;

}

.input__label::after {

bottom: 0;

}

.input__field:focus + .input__label .input__label-content,

.input--filled .input__label-content {

-webkit-transform: translate3d(0, -90%, 0);

transform: translate3d(0, -90%, 0);

}

.input__field:focus + .input__label::before,

.input--filled .input__label::before {

-webkit-transform: translate3d(0, -0.5em, 0);

transform: translate3d(0, -0.5em, 0);

}

.input__field:focus + .input__label::after,

.input--filled .input__label::after {

-webkit-transform: translate3d(0, 0.5em, 0);

transform: translate3d(0, 0.5em, 0);

}

#send-button {

width: 200px;

height: 60px;

background-color: #6a7989;

color: #000;

border: 0;

font-weight: bold;

font-size: 70.25%;

text-transform: uppercase;

letter-spacing: 4px;

-webkit-transition: -webkit-transform 0.3s;

transition: transform 0.3s;

}

#send-button:hover,

#send-button:focus {

outline: 0;

background-color: #fc0;

color: #000;

-webkit-transition: -webkit-transform 0.3s;

/*☝ NOTHING TO BE SEEN HERE ☝*/

transition: transform 0.3s;

}

@font-face {

font-family: 'Lato';

}

.footer {

position: absolute;

color: grey;

font-family: Lato;

text-align: right;

font-size: 8px;

right: 30px;

bottom: 15px;

}