利用CSS3实现input输入框动画样式库的方法

这篇文章主要介绍利用CSS3实现input输入框动画样式库的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联服务项目包括万宁网站建设、万宁网站制作、万宁网页制作以及万宁网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，万宁网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到万宁省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。

点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。

html代码：

 
Click every input.


 
   Name
 
 
   Email
 
 
   Phone
 


 
   Age
 
 
   Height
 
 
   Weight
 


 
   Class
 
 
   Element
 
 
   Move
 


 
   English
 
 
   Burger
 
 
   Wallet
 


 
   Credit Card
 
 
   Expires
 
 
   Security Code
 


 
   Knock knock
 
 
   Max
 
 
   Maxed out card ;)
 


 
   Artist
 
 
   Song
 
 
   Eyes
 


 
   State
 
 
   Planet
 
 
   Galaxy
 

css代码：

@import "compass/css3";
 
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);
 
* {
 box-sizing: border-box;
}
html,
body {
 overflow-x: hidden;
 font-family: "Open Sans", sans-serif;
 font-weight: 300;
 color: #fff;
 background: #efefef;
}
@mixin epic-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: 0 auto;
 padding: 60px 30px;
 background: #032429;
 @include epic-sides() {background: inherit;}
 text-align: center;
 
 &:first-child {
   padding: 40px 30px;
 }
 &: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: 30px 10px;
 }
}
.basic-slide {
 display: inline-block;
 width: 215px;
 padding: 10px 0 10px 15px;
 font-family: "Open Sans", sans;
 font-weight: 400;
 color: #377D6A;
 background: #efefef;
 border: 0;
 border-radius: 3px;
 outline: 0;
 text-indent: 70px; // Arbitrary.
 transition: all .3s ease-in-out;
 
 &::-webkit-input-placeholder {
   color: #efefef;
   text-indent: 0;
   font-weight: 300;
 }
 
 + label {
   display: inline-block;
   position: absolute;
   top: 0;
   left: 0;
   padding: 10px 15px;
   text-shadow: 0 1px 0 rgba(19,74,70,.4);
   background: #7AB893;
   transition: all .3s ease-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: 10px 0 10px 15px;
 font-family: "Open Sans", sans;
 font-weight: 400;
 color: #377D6A;
 background: #efefef;
 border: 0;
 border-radius: 3px;
 outline: 0;
 text-indent: 60px; // Arbitrary.
 transition: all .3s ease-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: 13px 15px;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   color: #032429;
   text-align: left;
   text-shadow: 0 1px 0 rgba(255,255,255,.4);
   transition: all .3s ease-in-out, color .3s ease-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 .3s ease-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: 0 1px 0 rgba(19,74,70,.4);
   transform: translateX(-100%);
   
   &:after {
     transform: translate(100%);
   }
 }
}
.gate {
 display: inline-block;
 width: 215px;
 padding: 10px 0 10px 15px;
 font-family: "Open Sans", sans;
 font-weight: 400;
 color: #377D6A;
 background: #efefef;
 border: 0;
 border-radius: 3px;
 outline: 0;
 text-indent: 65px; // Arbitrary.
 transition: all .3s ease-in-out;
 
 &::-webkit-input-placeholder {
   color: #efefef;
   text-indent: 0;
   font-weight: 300;
 }
 
 + label {
   display: inline-block;
   position: absolute;
   top: 0;
   left: 0;
   padding: 10px 15px;
   text-shadow: 0 1px 0 rgba(19,74,70,.4);
   background: #7AB893;
   transition: all .4s ease-in-out;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
   transform-origin: left bottom;
   z-index: 99;
   
   &:before,
   &:after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     border-radius: 3px;
     background: #377D6A;
     transform-origin: left bottom;
     transition: all .4s ease-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: 10px 0 10px 15px;
 font-family: "Open Sans", sans;
 font-weight: 400;
 color: #377D6A;
 background: #efefef;
 border: 0;
 border-radius: 3px;
 outline: 0;
 text-indent: 75px; // Arbitrary.
 transition: all .3s ease-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: 10px 15px;
   text-shadow: 0 1px 0 rgba(19,74,70,.4);
   transition: all .3s ease-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 .3s ease-in-out;
   }
   &:before {
     // Skinny bit here
     top: 5px;
     bottom: 5px;
     background: #377D6A; // change this to #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: 10px 0 10px 15px;
 font-family: "Open Sans", sans;
 font-weight: 400;
 color: #377D6A;
 background: #efefef;
 border: 0;
 border-radius: 3px;
 outline: 0;
 text-indent: 80px; // Arbitrary.
 transition: all .3s ease-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: 10px 15px;
   text-shadow: 0 1px 0 rgba(19,74,70,.4);
   transition: all .3s ease-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 .3s ease-in-out;
   }
   &:before {
     // Skinny bit here
     top: 6px;
     left: 5px;
     right: 5px;
     bottom: 6px;
     background: #377D6A; // change this to #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: 10px 0 10px 15px;
 font-family: "Open Sans", sans;
 font-weight: 400;
 color: #377D6A;
 background: #efefef;
 border: 0;
 border-radius: 3px;
 outline: 0;
 text-indent: 115px; // Arbitrary.
 transition: all .3s ease-in-out;
 
 &::-webkit-input-placeholder {
   color: #efefef;
   text-indent: 0;
   font-weight: 300;
 }
 
 + label {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   padding: 10px 15px;
   text-shadow: 0 1px 0 rgba(19,74,70,.4);
   background: #7AB893;
   transition: all .3s ease-in-out;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
   transform-origin: right center;
   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: 10px 0 10px 15px;
 font-family: "Open Sans", sans;
 font-weight: 400;
 color: #377D6A;
 background: #efefef;
 border: 0;
 border-radius: 3px;
 outline: 0;
 text-indent: 60px; // Arbitrary.
 transition: all .3s ease-in-out;
 
 &::-webkit-input-placeholder {
   color: #efefef;
   text-indent: 0;
   font-weight: 300;
 }
 
 + label {
   display: inline-block;
   position: absolute;
   top: 0;
   left: 0;
   padding: 10px 15px;
   text-shadow: 0 1px 0 rgba(19,74,70,.4);
   background: #7AB893;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
   transform-origin: 2px 2px;
   transform: rotate(0);
   // There should be a better way
   animation: swing-back .4s 1 ease-in-out;
 }
}
@keyframes swing {
 0% {
   transform: rotate(0);
 }
 20% {
   transform: rotate(116deg);
 }
 40% {
   transform: rotate(60deg);
 }
 60% {
   transform: rotate(98deg);
 }
 80% {
   transform: rotate(76deg);
 }
 100% {
   transform: rotate(82deg);
 }
}
@keyframes swing-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: swing 1.4s 1 ease-in-out;
   transform: rotate(82deg);
 }
}
.balloon {
 // As suggested by https://twitter.com/dbox/status/365888496486985728
 display: inline-block;
 width: 215px;
 padding: 10px 0 10px 15px;
 font-family: "Open Sans", sans;
 font-weight: 400;
 color: #377D6A;
 background: #efefef;
 border: 0;
 border-radius: 3px;
 outline: 0;
 text-indent: 60px; // Arbitrary.
 transition: all .3s ease-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: 5px 15px;
   color: #032429;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   text-shadow: 0 1px 0 rgba(19,74,70,0);
   transition: all .3s ease-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: 3px solid transparent;
     border-right: 3px solid transparent;
     border-top: 3px solid rgba(122,184,147,0);
     transition: all .3s ease-in-out;
   }
 }
}
.balloon:focus,
.balloon:active {
 color: #377D6A;
 text-indent: 0;
 background: #fff;
 
 &::-webkit-input-placeholder {
   color: #aaa;
 }
 + label {
   color: #fff;
   text-shadow: 0 1px 0 rgba(19,74,70,.4);
   background: rgba(122,184,147,1);
   transform: translateY(-40px);
   
   &:after {
     border-top: 4px solid rgba(122,184,147,1);
   }
 }
}

以上是利用CSS3实现input输入框动画样式库的方法的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！