html 设置div占位符 HTML5+CSS3 一组文本输入框占位符动效

CSS

语言：

CSSSCSS

确定

body {

color: #666;

font-family: Arial, Helvetica, sans-serif;

}

html {

box-sizing: border-box;

}

*,

*:before,

*:after {

box-sizing: inherit;

}

.input-container {

width: 300px;

}

@keyframes labelMove {

0% {

left: 45px;

top: 10px;

}

50% {

left: 45px;

top: -25px;

}

100% {

left: 0px;

top: -25px;

}

}

@keyframes labelMoveBack {

100% {

left: 45px;

top: 10px;

}

50% {

left: 45px;

top: -25px;

}

0% {

left: 0px;

top: -25px;

}

}

.fancy-input {

background: #fafafa;

position: relative;

display: inline-block;

border: 1px solid #ddd;

padding: 0 0 0 35px;

margin-top: 30px;

width: 100%;

transition: padding 0.4s;

}

.fancy-input.is-focus,

.fancy-input.is-filled {

padding-left: 30px;

}

.fancy-input input {

border: 0;

background: none;

padding: 10px;

width: 100%;

}

.fancy-input .placeholder {

position: absolute;

top: 10px;

left: 45px;

cursor: text;

animation: labelMoveBack 0.4s ease-in-out forwards;

}

.fancy-input input:focus {

outline: none;

background: whitesmoke;

}

.fancy-input input:focus + .placeholder,

.fancy-input.is-filled .placeholder {

animation: labelMove 0.4s ease-in-out forwards;

}

.fancy-input input:focus ~ [data-icon],

.fancy-input.is-filled [data-icon] {

width: 30px;

}

.fancy-input [data-icon] {

width: 35px;

position: absolute;

left: 0;

top: 0;

bottom: 0;

background: red;

display: block;

transition: all 0.4s;

}

.fancy-input-alt {

background: #fafafa;

position: relative;

display: inline-block;

border: 1px solid #ddd;

padding: 0 0 0 35px;

margin-top: 30px;

width: 100%;

transition: padding 0.4s;

}

.fancy-input-alt.is-focus,

.fancy-input-alt.is-filled {

padding-left: 30px;

}

.fancy-input-alt input {

border: 0;

background: none;

padding: 10px;

width: 100%;

}

.fancy-input-alt.is-filled .placeholder,

.fancy-input-alt input:focus + .placeholder {

z-index: 1;

left: 10px;

color: #fff;

}

.fancy-input-alt.is-filled .placeholder:after,

.fancy-input-alt input:focus + .placeholder:after {

content: ':';

}

.fancy-input-alt .placeholder {

position: absolute;

top: 10px;

left: 45px;

cursor: text;

transition: all 0.4s;

}

.fancy-input-alt input:focus {

outline: none;

background: whitesmoke;

}

.fancy-input-alt [data-icon] {

width: 35px;

position: absolute;

left: 0;

top: 0;

bottom: 0;

background: green;

display: block;

transition: all 0.4s;

}

.fancy-input-alt input:focus ~ [data-icon]:before,

.fancy-input-alt.is-filled [data-icon]:before {

opacity: 0;

}

.fancy-input-alt [data-icon]:before {

width: 20px;

height: 20px;

background: blue;

content: '';

display: block;

position: absolute;

z-index: 2;

left: 7.5px;

top: 50%;

margin-top: -10px;

transition: opacity 0.25s;

}