享一个用纯CSS3实现的，漂亮的input输入框动画样式库-Textinputlove。
点击每个输入框都用不同的动画效果，始终显示标签label，并显示placeholder（占位符）文本。
html代码：
<divclass="row">
<p>Clickeveryinput.</p>
</div>
<divclass="row">
<span>
<inputclass="basic-slide"id="name"type="text"placeholder="Yourbestname"/><labelfor="name">Name</label>
</span>
<span>
<inputclass="basic-slide"id="email"type="text"placeholder="Yourfavoriteemail"/><labelfor="email">Email</label>
</span>
<span>
<inputclass="basic-slide"id="phone"type="text"placeholder="Youcantrustus"/><labelfor="phone">Phone</label>
</span>
</div>
<divclass="row">
<span>
<inputclass="clean-slide"id="age"type="text"placeholder="Goforthehighscore!"/><labelfor="age">Age</label>
</span>
<span>
<inputclass="clean-slide"id="height"type="text"placeholder="Heelscount"/><labelfor="height">Height</label>
</span>
<span>
<inputclass="clean-slide"id="weight"type="text"placeholder="Goaheadandlie"/><labelfor="weight">Weight</label>
</span>
</div>
<divclass="row">
<span>
<inputclass="gate"id="class"type="text"placeholder="Wizard!"/><labelfor="class">Class</label>
</span>
<span>
<inputclass="gate"id="element"type="text"placeholder="Fivetochoosefrom"/><labelfor="element">Element</label>
</span>
<span>
<inputclass="gate"id="move"type="text"placeholder="Secretbookattack!"/><labelfor="move">Move</label>
</span>
</div>
<divclass="row">
<span>
<inputclass="skinny"id="english"type="text"placeholder="Doyouspeakit?"/><labelfor="english">English</label>
</span>
<span>
<inputclass="skinny"id="burger"type="text"placeholder="ARoyalewithcheese?"/><labelfor="burger">Burger</label>
</span>
<span>
<inputclass="skinny"id="wallet"type="text"placeholder="BadMother****er"/><labelfor="wallet">Wallet</label>
</span>
</div>
<divclass="row">
<span>
<inputclass="slide-up"id="card"type="text"placeholder="Fundme!"/><labelfor="card">CreditCard</label>
</span>
<span>
<inputclass="slide-up"id="expires"type="text"placeholder="MonthDay,Year"/><labelfor="expires">Expires</label>
</span>
<span>
<inputclass="slide-up"id="security"type="text"placeholder="Public"/><labelfor="security">SecurityCode</label>
</span>
</div>
<divclass="row">
<span>
<inputclass="card-slide"id="knock"type="text"placeholder="Who'sthere?"/><labelfor="knock">Knockknock</label>
</span>
<span>
<inputclass="card-slide"id="max"type="text"placeholder="Maxwho?"/><labelfor="max">Max</label>
</span>
<span>
<inputclass="card-slide"id="out"type="text"placeholder="Sunuva..."/><labelfor="out">Maxedoutcard;)</label>
</span>
</div>
<divclass="row">
<span>
<inputclass="swing"id="artist"type="text"placeholder="BO$$"/><labelfor="artist">Artist</label>
</span>
<span>
<inputclass="swing"id="song"type="text"placeholder="Idon'tgivea****"/><labelfor="song">Song</label>
</span>
<span>
<inputclass="swing"id="eyes"type="text"placeholder="Crazy"/><labelfor="eyes">Eyes</label>
</span>
</div>
<divclass="row">
<span>
<inputclass="balloon"id="state"type="text"placeholder="Liquid,solid,gaseous..."/><labelfor="state">State</label>
</span>
<span>
<inputclass="balloon"id="planet"type="text"placeholder="ProbablyEarth"/><labelfor="planet">Planet</label>
</span>
<span>
<inputclass="balloon"id="galaxy"type="text"placeholder="MilkyWay?"/><labelfor="galaxy">Galaxy</label>
</span>
</div>
css代码：
@import"compass/css3";
@importurl(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);
*{
box-sizing:border-box;
}
html,
body{
overflow-x:hidden;
font-family:"OpenSans",sans-serif;
font-weight:300;
color:#fff;
background:#efefef;
}
@mixinepic-sides(){//https://codepen.io/MichaelArestad/pen/qltuk
position:relative;
z-index:1;
&:before{
position:absolute;
content:"";
display:block;
top:0;
left:-5000px;
height:100%;
width:15000px;
z-index:-1;
@content;
}
}
.row{
max-width:800px;
margin:0auto;
padding:60px30px;
background:#032429;
@includeepic-sides(){background:inherit;}
text-align:center;
&:first-child{
padding:40px30px;
}
&:nth-child(2),
&:nth-child(8),
&:nth-child(10){
background:#134A46;
}
&:nth-child(3),
&:nth-child(7){
background:#377D6A;
}
&:nth-child(4),
&:nth-child(6){
background:#7AB893;
}
&:nth-child(5){
background:#B2E3AF;
}
span{
position:relative;
display:inline-block;
margin:30px10px;
}
}
.basic-slide{
display:inline-block;
width:215px;
padding:10px010px15px;
font-family:"OpenSans",sans;
font-weight:400;
color:#377D6A;
background:#efefef;
border:0;
border-radius:3px;
outline:0;
text-indent:70px;//Arbitrary.
transition:all.3sease-in-out;
&::-webkit-input-placeholder{
color:#efefef;
text-indent:0;
font-weight:300;
}
+label{
display:inline-block;
position:absolute;
top:0;
left:0;
padding:10px15px;
text-shadow:01px0rgba(19,74,70,.4);
background:#7AB893;
transition:all.3sease-in-out;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
}
.basic-slide:focus,
.basic-slide:active{
color:#377D6A;
text-indent:0;
background:#fff;
border-top-left-radius:0;
border-bottom-left-radius:0;
&::-webkit-input-placeholder{
color:#aaa;
}
+label{
transform:translateX(-100%);
}
}
.clean-slide{
position:relative;
display:inline-block;
width:215px;
padding:10px010px15px;
font-family:"OpenSans",sans;
font-weight:400;
color:#377D6A;
background:#efefef;
border:0;
border-radius:3px;
outline:0;
text-indent:60px;//Arbitrary.
transition:all.3sease-in-out;
&::-webkit-input-placeholder{
color:#efefef;
text-indent:0;
font-weight:300;
}
+label{
display:inline-block;
position:absolute;
transform:translateX(0);
top:0;
left:0;
bottom:0;
padding:13px15px;
font-size:11px;
font-weight:700;
text-transform:uppercase;
color:#032429;
text-align:left;
text-shadow:01px0rgba(255,255,255,.4);
transition:all.3sease-in-out,color.3sease-out;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
overflow:hidden;
&:after{
content:"";
position:absolute;
top:0;
right:100%;
bottom:0;
width:100%;
background:#7AB893;
z-index:-1;
transform:translate(0);
transition:all.3sease-in-out;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
}
}
.clean-slide:focus,
.clean-slide:active{
color:#377D6A;
text-indent:0;
background:#fff;
border-top-left-radius:0;
border-bottom-left-radius:0;
&::-webkit-input-placeholder{
color:#aaa;
}
+label{
color:#fff;
text-shadow:01px0rgba(19,74,70,.4);
transform:translateX(-100%);
&:after{
transform:translate(100%);
}
}
}
.gate{
display:inline-block;
width:215px;
padding:10px010px15px;
font-family:"OpenSans",sans;
font-weight:400;
color:#377D6A;
background:#efefef;
border:0;
border-radius:3px;
outline:0;
text-indent:65px;//Arbitrary.
transition:all.3sease-in-out;
&::-webkit-input-placeholder{
color:#efefef;
text-indent:0;
font-weight:300;
}
+label{
display:inline-block;
position:absolute;
top:0;
left:0;
padding:10px15px;
text-shadow:01px0rgba(19,74,70,.4);
background:#7AB893;
transition:all.4sease-in-out;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
transform-origin:leftbottom;
z-index:99;
&:before,
&:after{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border-radius:3px;
background:#377D6A;
transform-origin:leftbottom;
transition:all.4sease-in-out;
pointer-events:none;
z-index:-1;
}
&:before{
background:rgba(3,36,41,.2);
z-index:-2;
right:20%;
}
}
}
span:nth-child(2).gate{
text-indent:85px;
}
span:nth-child(2).gate:focus,
span:nth-child(2).gate:active{
text-indent:0;
}
.gate:focus,
.gate:active{
color:#377D6A;
text-indent:0;
background:#fff;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
&::-webkit-input-placeholder{
color:#aaa;
}
+label{
transform:rotate(-66deg);
border-radius:3px;
&:before{
transform:rotate(10deg);
}
}
}
.skinny{
display:inline-block;
width:215px;
padding:10px010px15px;
font-family:"OpenSans",sans;
font-weight:400;
color:#377D6A;
background:#efefef;
border:0;
border-radius:3px;
outline:0;
text-indent:75px;//Arbitrary.
transition:all.3sease-in-out;
&::-webkit-input-placeholder{
color:#efefef;
text-indent:0;
font-weight:300;
}
+label{
display:inline-block;
position:absolute;
transform:translateX(0);
top:0;
left:0;
padding:10px15px;
text-shadow:01px0rgba(19,74,70,.4);
transition:all.3sease-in-out;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
overflow:hidden;
&:before,
&:after{
content:"";
position:absolute;
right:0;
left:0;
z-index:-1;
transition:all.3sease-in-out;
}
&:before{
//Skinnybithere
top:5px;
bottom:5px;
background:#377D6A;//changethisto#134A46
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
&:after{
top:0;
bottom:0;
background:#377D6A;
}
}
}
.skinny:focus,
.skinny:active{
color:#377D6A;
text-indent:0;
background:#fff;
&::-webkit-input-placeholder{
color:#aaa;
}
+label{
transform:translateX(-100%);
&:after{
transform:translateX(100%);
}
}
}
.slide-up{
display:inline-block;
width:215px;
padding:10px010px15px;
font-family:"OpenSans",sans;
font-weight:400;
color:#377D6A;
background:#efefef;
border:0;
border-radius:3px;
outline:0;
text-indent:80px;//Arbitrary.
transition:all.3sease-in-out;
&::-webkit-input-placeholder{
color:#efefef;
text-indent:0;
font-weight:300;
}
+label{
display:inline-block;
position:absolute;
transform:translateX(0);
top:0;
left:0;
padding:10px15px;
text-shadow:01px0rgba(19,74,70,.4);
transition:all.3sease-in-out;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
overflow:hidden;
&:before,
&:after{
content:"";
position:absolute;
right:0;
left:0;
z-index:-1;
transition:all.3sease-in-out;
}
&:before{
//Skinnybithere
top:6px;
left:5px;
right:5px;
bottom:6px;
background:#377D6A;//changethisto#134A46
}
&:after{
top:0;
bottom:0;
background:#377D6A;
}
}
}
span:nth-child(1).slide-up{
text-indent:105px;
}
span:nth-child(3).slide-up{
text-indent:125px;
}
span:nth-child(1).slide-up:focus,
span:nth-child(1).slide-up:active,
span:nth-child(3).slide-up:focus,
span:nth-child(3).slide-up:active{
text-indent:0;
}
.slide-up:focus,
.slide-up:active{
color:#377D6A;
text-indent:0;
background:#fff;
&::-webkit-input-placeholder{
color:#aaa;
}
+label{
transform:translateY(-100%);
&:before{
border-radius:5px;
}
&:after{
transform:translateY(100%);
}
}
}
.card-slide{
display:inline-block;
width:215px;
padding:10px010px15px;
font-family:"OpenSans",sans;
font-weight:400;
color:#377D6A;
background:#efefef;
border:0;
border-radius:3px;
outline:0;
text-indent:115px;//Arbitrary.
transition:all.3sease-in-out;
&::-webkit-input-placeholder{
color:#efefef;
text-indent:0;
font-weight:300;
}
+label{
display:block;
position:absolute;
top:0;
left:0;
padding:10px15px;
text-shadow:01px0rgba(19,74,70,.4);
background:#7AB893;
transition:all.3sease-in-out;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
transform-origin:rightcenter;
transform:perspective(300px)scaleX(1)rotateY(0deg);
}
}
span:nth-child(2).card-slide{
text-indent:55px;
}
span:nth-child(3).card-slide{
text-indent:150px;
}
span:nth-child(2).card-slide:focus,
span:nth-child(2).card-slide:active,
span:nth-child(3).card-slide:focus,
span:nth-child(3).card-slide:active{
text-indent:0;
}
.card-slide:focus,
.card-slide:active{
color:#377D6A;
text-indent:0;
background:#fff;
border-top-left-radius:0;
border-bottom-left-radius:0;
&::-webkit-input-placeholder{
color:#aaa;
}
+label{
transform:perspective(600px)translateX(-100%)rotateY(80deg);
}
}
.swing{
display:inline-block;
width:215px;
padding:10px010px15px;
font-family:"OpenSans",sans;
font-weight:400;
color:#377D6A;
background:#efefef;
border:0;
border-radius:3px;
outline:0;
text-indent:60px;//Arbitrary.
transition:all.3sease-in-out;
&::-webkit-input-placeholder{
color:#efefef;
text-indent:0;
font-weight:300;
}
+label{
display:inline-block;
position:absolute;
top:0;
left:0;
padding:10px15px;
text-shadow:01px0rgba(19,74,70,.4);
background:#7AB893;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
transform-origin:2px2px;
transform:rotate(0);
//Thereshouldbeabetterway
animation:swing-back.4s1ease-in-out;
}
}
@keyframesswing{
0%{
transform:rotate(0);
}
20%{
transform:rotate(116deg);
}
40%{
transform:rotate(60deg);
}
60%{
transform:rotate(98deg);
}
80%{
transform:rotate(76deg);
}
100%{
transform:rotate(82deg);
}
}
@keyframesswing-back{
0%{
transform:rotate(82deg);
}
100%{
transform:rotate(0);
}
}
.swing:focus,
.swing:active{
color:#377D6A;
text-indent:0;
background:#fff;
border-top-left-radius:0;
border-bottom-left-radius:0;
&::-webkit-input-placeholder{
color:#aaa;
}
+label{
animation:swing1.4s1ease-in-out;
transform:rotate(82deg);
}
}
.balloon{
//Assuggestedbyhttps://twitter.com/dbox/status/365888496486985728
display:inline-block;
width:215px;
padding:10px010px15px;
font-family:"OpenSans",sans;
font-weight:400;
color:#377D6A;
background:#efefef;
border:0;
border-radius:3px;
outline:0;
text-indent:60px;//Arbitrary.
transition:all.3sease-in-out;
&::-webkit-input-placeholder{
color:#efefef;
text-indent:0;
font-weight:300;
}
+label{
display:inline-block;
position:absolute;
top:8px;
left:0;
bottom:8px;
padding:5px15px;
color:#032429;
font-size:11px;
font-weight:700;
text-transform:uppercase;
text-shadow:01px0rgba(19,74,70,0);
transition:all.3sease-in-out;
border-radius:3px;
background:rgba(122,184,147,0);
&:after{
position:absolute;
content:"";
width:0;
height:0;
top:100%;
left:50%;
margin-left:-3px;
border-left:3pxsolidtransparent;
border-right:3pxsolidtransparent;
border-top:3pxsolidrgba(122,184,147,0);
transition:all.3sease-in-out;
}
}
}
.balloon:focus,
.balloon:active{
color:#377D6A;
text-indent:0;
background:#fff;
&::-webkit-input-placeholder{
color:#aaa;
}
+label{
color:#fff;
text-shadow:01px0rgba(19,74,70,.4);
background:rgba(122,184,147,1);
transform:translateY(-40px);
&:after{
border-top:4pxsolidrgba(122,184,147,1);
}
}
}
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c54472.shtml
