怎么利用CSS3实现input输入框动画样式库

这篇文章给大家分享的是有关怎么利用css3实现input输入框动画样式库的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

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

　　}

　　}

　　}

感谢各位的阅读！关于“怎么利用CSS3实现input输入框动画样式库”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！