快上网建站品牌

13518219792

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

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

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

html代码：

Clickeveryinput.

Name

Email

Phone

Age

Height

Weight

Class

Element

Move

English

Burger

Wallet

CreditCard

Expires

SecurityCode

Knockknock

Max

Maxedoutcard;)

Artist

Song

Eyes

State

Planet

Galaxy

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输入框动画样式库
网址分享：http://csdahua.cn/article/jisjgo.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯

行业动态

企业网站建设的重要性！

现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...

服务项目

联系吧 在百度地图上找到我们

电话：13518219792

如遇占线或暂未接听请拨：136xxx98888

业务咨询 技术咨询 售后服务
网站制作
手机网站制作
成都企业网站制作
成都网站制作
成都网站制作
网站建设
乐山网站建设
安防网站建设方案
新都网站建设
成都网站建设
网站设计
教育网站设计方案
网站设计公司
攀枝花网站设计
定制网站设计
联系我们
电话：13518219792
邮箱：631063699@qq.com
地址：成都青羊区锦天国际1002号
网址：www.csdahua.cn

微信二维码

Copyright © 2002-2023 www.csdahua.cn 快上网建站品牌 QQ：244261566 版权所有 备案号：蜀ICP备19037934号