這篇文章給大家分享的是有關(guān)怎么利用CSS3實(shí)現(xiàn)input輸入框動(dòng)畫樣式庫的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)介紹好的網(wǎng)站是理念、設(shè)計(jì)和技術(shù)的結(jié)合。創(chuàng)新互聯(lián)公司擁有的網(wǎng)站設(shè)計(jì)理念、多方位的設(shè)計(jì)風(fēng)格、經(jīng)驗(yàn)豐富的設(shè)計(jì)團(tuán)隊(duì)。提供PC端+手機(jī)端網(wǎng)站建設(shè)，用營銷思維進(jìn)行網(wǎng)站設(shè)計(jì)、采用先進(jìn)技術(shù)開源代碼、注重用戶體驗(yàn)與SEO基礎(chǔ)，將技術(shù)與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺化效果。

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

}

}

}

感謝各位的閱讀！關(guān)于“怎么利用CSS3實(shí)現(xiàn)input輸入框動(dòng)畫樣式庫”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

本文名稱：怎么利用CSS3實(shí)現(xiàn)input輸入框動(dòng)畫樣式庫
本文地址：http://www.rwnh.cn/article10/jisjgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站制作、用戶體驗(yàn)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)