奇妙的input text

1.效果图
















2.依赖文件--jquery

3.html

<span style="font-size:14px;"><div class="content">
<div class="nice-input">
<label class="nice-input-label">表单</label>
<input type="text" class="nice-input-text down">
</div>
<div class="nice-input">
<label class="nice-input-label">表单</label>
<input type="text" class="nice-input-text up">
</div>
<div class="nice-input">
<label class="nice-input-label">表单</label>
<input type="text" class="nice-input-text flip">
</div>
</div></span>4.js

<span style="font-size:14px;">$(".nice-input input").focus(function(){
var labelClass="nice-input-label-up";
if($(this).hasClass('down')){
labelClass='nice-input-label-down';
}else if($(this).hasClass('up')){
labelClass='nice-input-label-up';
}else if($(this).hasClass('flip')){
labelClass='nice-input-label-flip';
}
</span>

<span style="font-size:14px;">				$(this).prev('.nice-input label').addClass(labelClass);

$(this).removeClass('nice-input-text');
$(this).addClass('nice-input-text-foucs');
});
$(".nice-input input").blur(function(){
var labelClass="nice-input-label-up";
if($(this).hasClass('down')){
labelClass='nice-input-label-down';
}else if($(this).hasClass('up')){
labelClass='nice-input-label-up';
}else if($(this).hasClass('flip')){
labelClass='nice-input-label-flip';
}
$(this).prev('.nice-input label').removeClass(labelClass);

$(this).addClass('nice-input-text');
$(this).removeClass('nice-input-text-foucs');
});</span>

3.css

<span style="font-size:14px;"><style>
.content{
position: absolute;
width: 100%;
margin: 0 auto;
height: 500px;
background-color: rgb(31,104,122);
}
.nice-input{
position: relative;
width:200px;
height: 25px;
margin: auto;
margin-top: 100px;
}
.nice-input .nice-input-label{
position: absolute;
display: inline-block;
left: 0px;
right: 0px;
height: 25px;
width: 40px;
padding: 0px;
margin: 0px;
background-color: rgb(122,184,147);
border: 1px solid rgb(122,184,147);
color: #FFFFFF;
text-align: center;
vertical-align: middle;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
transition: transform 2s, animation 5s;
}
.nice-input .nice-input-text{
display: inline-block;
height: 25px;
width: 158px;
padding: 0px;
margin: 0px;
padding-left: 40px;
border: 1px solid #FFFFFF;
background-color: rgb(31,104,122);
color: #FFFFFF;
border-radius: 3px;
margin-left: 2px;
}
.nice-input .nice-input-text-foucs{
display: inline-block;
height: 25px;
padding: 0px;
margin: 0px;

border: 1px solid #FFFFFF;
background-color: rgb(31,104,122);
color: #FFFFFF;
border-radius: 3px;
border: 1px solid #FFFFFF !important;
width:198px;
}
@keyframes myfirst
{
0% {
transform: translate(0,35px) rotate(50deg);
-ms-transform: translate(0,35px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(50deg); /* Opera */
-moz-transform: translate(0,35px) rotate(50deg); /* Firefox */
}
20% {
transform: translate(0,35px) rotate(20deg);
-ms-transform: translate(0,35px) rotate(20deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(20deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(20deg); /* Opera */
-moz-transform: translate(0,35px) rotate(20deg); /* Firefox */
}
40% {
transform: translate(0,35px) rotate(50deg);
-ms-transform: translate(0,35px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(50deg); /* Safari and Chrome
c03c
*/
-o-transform: translate(0,35px) rotate(50deg); /* Opera */
-moz-transform: translate(0,35px) rotate(50deg); /* Firefox */
}
60% {
transform: translate(0,35px) rotate(30deg);
-ms-transform: translate(0,35px) rotate(30deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(30deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(30deg); /* Opera */
-moz-transform: translate(0,35px) rotate(30deg); /* Firefox */
}
80% {
transform: translate(0,35px) rotate(50deg);
-ms-transform: translate(0,35px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(50deg); /* Opera */
-moz-transform: translate(0,35px) rotate(50deg); /* Firefox */
}
100% {
transform: translate(0,35px) rotate(40deg);
-ms-transform: translate(0,35px) rotate(40deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(40deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(40deg); /* Opera */
-moz-transform: translate(0,35px) rotate(40deg); /* Firefox */
}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {
transform: translate(0,35px) rotate(50deg);
-ms-transform: translate(0,35px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(50deg); /* Opera */
-moz-transform: translate(0,35px) rotate(50deg); /* Firefox */
}
20% {
transform: translate(0,35px) rotate(20deg);
-ms-transform: translate(0,35px) rotate(20deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(20deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(20deg); /* Opera */
-moz-transform: translate(0,35px) rotate(20deg); /* Firefox */
}
40% {
transform: translate(0,35px) rotate(50deg);
-ms-transform: translate(0,35px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(50deg); /* Opera */
-moz-transform: translate(0,35px) rotate(50deg); /* Firefox */
}
60% {
transform: translate(0,35px) rotate(30deg);
-ms-transform: translate(0,35px) rotate(30deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(30deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(30deg); /* Opera */
-moz-transform: translate(0,35px) rotate(30deg); /* Firefox */
}
80% {
transform: translate(0,35px) rotate(50deg);
-ms-transform: translate(0,35px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(50deg); /* Opera */
-moz-transform: translate(0,35px) rotate(50deg); /* Firefox */
}
100% {
transform: translate(0,35px) rotate(40deg);
-ms-transform: translate(0,35px) rotate(40deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(40deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(40deg); /* Opera */
-moz-transform: translate(0,35px) rotate(40deg); /* Firefox */
}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {
transform: translate(0,35px) rotate(50deg);
-ms-transform: translate(0,35px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(50deg); /* Opera */
-moz-transform: translate(0,35px) rotate(50deg); /* Firefox */
}
20% {
transform: translate(0,35px) rotate(20deg);
-ms-transform: translate(0,35px) rotate(20deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(20deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(20deg); /* Opera */
-moz-transform: translate(0,35px) rotate(20deg); /* Firefox */
}
40% {
transform: translate(0,35px) rotate(50deg);
-ms-transform: translate(0,35px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(50deg); /* Opera */
-moz-transform: translate(0,35px) rotate(50deg); /* Firefox */
}
60% {
transform: translate(0,35px) rotate(30deg);
-ms-transform: translate(0,35px) rotate(30deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(30deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(30deg); /* Opera */
-moz-transform: translate(0,35px) rotate(30deg); /* Firefox */
}
80% {
transform: translate(0,35px) rotate(50deg);
-ms-transform: translate(0,35px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(50deg); /* Opera */
-moz-transform: translate(0,35px) rotate(50deg); /* Firefox */
}
100% {
transform: translate(0,35px) rotate(40deg);
-ms-transform: translate(0,35px) rotate(40deg); /* IE 9 */
-webkit-transform: translate(0,35px) rotate(40deg); /* Safari and Chrome */
-o-transform: translate(0,35px) rotate(40deg); /* Opera */
-moz-transform: translate(0,35px) rotate(40deg); /* Firefox */
}
}

@-o-keyframes myfirst /* Opera */
{
0% {
transform: translate(0,25px) rotate(50deg);
-ms-transform: translate(0,25px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,25px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,25px) rotate(50deg); /* Opera */
-moz-transform: translate(0,25px) rotate(50deg); /* Firefox */
}
20% {
transform: translate(0,25px) rotate(0deg);
-ms-transform: translate(0,25px) rotate(0deg); /* IE 9 */
-webkit-transform: translate(0,25px) rotate(0deg); /* Safari and Chrome */
-o-transform: translate(0,25px) rotate(0deg); /* Opera */
-moz-transform: translate(0,25px) rotate(0deg); /* Firefox */
}
40% {
transform: translate(0,25px) rotate(50deg);
-ms-transform: translate(0,25px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,25px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,25px) rotate(50deg); /* Opera */
-moz-transform: translate(0,25px) rotate(50deg); /* Firefox */
}
60% {
transform: translate(0,25px) rotate(10deg);
-ms-transform: translate(0,25px) rotate(10deg); /* IE 9 */
-webkit-transform: translate(0,25px) rotate(10deg); /* Safari and Chrome */
-o-transform: translate(0,25px) rotate(10deg); /* Opera */
-moz-transform: translate(0,25px) rotate(10deg); /* Firefox */
}
80% {
transform: translate(0,25px) rotate(20deg);
-ms-transform: translate(0,25px) rotate(20deg); /* IE 9 */
-webkit-transform: translate(0,25px) rotate20deg); /* Safari and Chrome */
-o-transform: translate(0,25px) rotate(20deg); /* Opera */
-moz-transform: translate(0,25px) rotate(20deg); /* Firefox */
}
100% {
transform: translate(0,25px) rotate(50deg);
-ms-transform: translate(0,25px) rotate(50deg); /* IE 9 */
-webkit-transform: translate(0,25px) rotate(50deg); /* Safari and Chrome */
-o-transform: translate(0,25px) rotate(50deg); /* Opera */
-moz-transform: translate(0,25px) rotate(50deg); /* Firefox */
}
}
/*
* 向下
*/
.nice-input .nice-input-label-down{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
animation-fill-mode: forwards;
}
/*
* 向上
*/
.nice-input .nice-input-label-up{
transform: translate(0,-35px) rotate(-50deg);
-ms-transform: translate(0,-35px) rotate(-50deg); /* IE 9 */
-webkit-transform: translate(0,-35px) rotate(-50deg); /* Safari and Chrome */
-o-transform: translate(0,-35px) rotate(-50deg); /* Opera */
-moz-transform: translate(0,-35px) rotate(-50deg); /* Firefox */

transition:transform 2s;
-moz-transition:-moz-transform 2s;
-webkit-transition: -webkit-transform 2s;
-o-transition: -o-transform 2s;
}
/*
* 翻开
*/
.nice-input .nice-input-label-flip{
transform:translate(-38px,0) rotateY(160deg);
-ms-transform:translate(-38px,0) rotateY(160deg); /* IE 9 */
-webkit-transform:translate(-38px,0) rotateY(160deg); /* Safari and Chrome */
-o-transform:translate(-38px,0) rotateY(160deg); /* Opera */
-moz-transform:translate(-38px,0) rotateY(160deg); /* Firefox */

transition:transform 2s;
-moz-transition:-moz-transform 2s;
-webkit-transition: -webkit-transform 2s;
-o-transition: -o-transform 2s;
}
</style></span><span style="font-size:24px;font-weight: bold;">
</span>