利用CSS3实现input输入框动画样式库的方法-创新互联

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

创新互联建站提供高防主机、云服务器、香港服务器、多线BGP机房等

享一个用纯 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输入框动画样式库的方法的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道！

文章名称：利用CSS3实现input输入框动画样式库的方法-创新互联
网站URL：http://chengdu.cdxwcx.cn/article/geeoh.html

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

利用CSS3实现input输入框动画样式库的方法-创新互联

其他资讯

jquery到底部加载 jquery加载函数

ios开发手势聚焦苹果手势脚本

mac怎么卸载mysql Mac怎么卸载mysql

css样式用正则 css样式规则

android默认编码安卓编码转换

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

利用CSS3实现input输入框动画样式库的方法-创新互联

其他资讯

jquery到底部加载 jquery加载函数

ios开发手势聚焦 苹果手势脚本

mac怎么卸载mysql Mac怎么卸载mysql

css样式用正则 css样式规则

android默认编码 安卓编码转换

成都网站建设设计将想法与焦点和您一起共享

ios开发手势聚焦苹果手势脚本

android默认编码安卓编码转换