html输入框展开收起,HTML5 点击输入框时标签收缩到右边的动效

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body,

html {

background: #efefef;

}

form {

width: 500px;

margin: 0 auto;

font-family: 'Open Sans';

color: #fefefe;

}

.form__field {

position: relative;

width: 463px;

display: block;

overflow: hidden;

margin: 1em 0;

background: #192434;

}

label {

float: right;

width: 100%;

height: 100%;

padding: 1em;

font-size: 1em;

-webkit-transition: -webkit-transform 400ms;

transition: transform 400ms;

-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);

transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);

}

input[type="submit"] {

width: 100%;

margin: 0;

background: none;

}

input,

textarea {

position: absolute;

top: 0;

right: 100%;

width: 75%;

height: 100%;

margin: 0;

padding: 1em;

border: none;

-webkit-transform: translate3D(-100%, 0, 0);

-ms-transform: translate3D(-100%, 0, 0);

transform: translate3D(-100%, 0, 0);

-webkit-transition: -webkit-transform 400ms;

transition: transform 400ms;

-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);

transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);

-webkit-transition-delay: 60ms;

transition-delay: 60ms;

}

input:focus,

input.filled,

textarea:focus,

textarea.filled {

-webkit-transform: translate3D(100%, 0, 0);

-ms-transform: translate3D(100%, 0, 0);

transform: translate3D(100%, 0, 0);

outline: none;

}

input:focus + label,

input.filled + label,

textarea:focus + label,

textarea.filled + label {

-webkit-transform: translate3D(75%, 0, 0);

-ms-transform: translate3D(75%, 0, 0);

transform: translate3D(75%, 0, 0);

}