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);
}