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

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

成都网站制作、做网站、外贸营销网站建设介绍好的网站是理念、设计和技术的结合。创新互联公司拥有的网站设计理念、多方位的设计风格、经验丰富的设计团队。提供PC端+手机端网站建设，用营销思维进行网站设计、采用先进技术开源代码、注重用户体验与SEO基础，将技术与创意整合到网站之中，以契合客户的方式做到创意性的视觉化效果。

html代码：

<divclass="row">

Clickeveryinput.

</div>

<divclass="row">

<inputclass="basic-slide"id="name"type="text"placeholder="Yourbestname"/><labelfor="name">Name</label>

<inputclass="basic-slide"id="email"type="text"placeholder="Yourfavoriteemail"/><labelfor="email">Email</label>

<inputclass="basic-slide"id="phone"type="text"placeholder="Youcantrustus"/><labelfor="phone">Phone</label>

</div>

<divclass="row">

<inputclass="clean-slide"id="age"type="text"placeholder="Goforthehighscore!"/><labelfor="age">Age</label>

<inputclass="clean-slide"id="height"type="text"placeholder="Heelscount"/><labelfor="height">Height</label>

<inputclass="clean-slide"id="weight"type="text"placeholder="Goaheadandlie"/><labelfor="weight">Weight</label>

</div>

<divclass="row">

<inputclass="gate"id="class"type="text"placeholder="Wizard!"/><labelfor="class">Class</label>

<inputclass="gate"id="element"type="text"placeholder="Fivetochoosefrom"/><labelfor="element">Element</label>

<inputclass="gate"id="move"type="text"placeholder="Secretbookattack!"/><labelfor="move">Move</label>

</div>

<divclass="row">

<inputclass="skinny"id="english"type="text"placeholder="Doyouspeakit?"/><labelfor="english">English</label>

<inputclass="skinny"id="burger"type="text"placeholder="ARoyalewithcheese?"/><labelfor="burger">Burger</label>

<inputclass="skinny"id="wallet"type="text"placeholder="BadMother****er"/><labelfor="wallet">Wallet</label>

</div>

<divclass="row">

<inputclass="slide-up"id="card"type="text"placeholder="Fundme!"/><labelfor="card">CreditCard</label>

<inputclass="slide-up"id="expires"type="text"placeholder="MonthDay,Year"/><labelfor="expires">Expires</label>

<inputclass="slide-up"id="security"type="text"placeholder="Public"/><labelfor="security">SecurityCode</label>

</div>

<divclass="row">

<inputclass="card-slide"id="knock"type="text"placeholder="Who'sthere?"/><labelfor="knock">Knockknock</label>

<inputclass="card-slide"id="max"type="text"placeholder="Maxwho?"/><labelfor="max">Max</label>

<inputclass="card-slide"id="out"type="text"placeholder="Sunuva..."/><labelfor="out">Maxedoutcard;)</label>

</div>

<divclass="row">

<inputclass="swing"id="artist"type="text"placeholder="BO$$"/><labelfor="artist">Artist</label>

<inputclass="swing"id="song"type="text"placeholder="Idon'tgivea****"/><labelfor="song">Song</label>

<inputclass="swing"id="eyes"type="text"placeholder="Crazy"/><labelfor="eyes">Eyes</label>

</div>

<divclass="row">

<inputclass="balloon"id="state"type="text"placeholder="Liquid,solid,gaseous..."/><labelfor="state">State</label>

<inputclass="balloon"id="planet"type="text"placeholder="ProbablyEarth"/><labelfor="planet">Planet</label>

<inputclass="balloon"id="galaxy"type="text"placeholder="MilkyWay?"/><labelfor="galaxy">Galaxy</label>

</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输入框动画样式库”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

本文名称：怎么利用CSS3实现input输入框动画样式库
本文地址：https://www.cdcxhl.com/article10/jisjgo.html

成都网站建设公司_创新互联，为您提供网站维护、网站制作、用户体验、网页设计公司、网站建设、营销型网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容