纯 CSS3 实现漂亮的 input 输入框

分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。
点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。

演示地址：https://codepen.io/MichaelArestad/full/ohLIa
HTML 代码：

<div class="row"><p>Click every input.</p>
</div>
<div class="row"><span><input class="basic-slide" id="name" type="text" placeholder="Your best name" /><label for="name">Name</label></span><span><input class="basic-slide" id="email" type="text" placeholder="Your favorite email" /><label for="email">Email</label></span><span><input class="basic-slide" id="phone" type="text" placeholder="You can trust us" /><label for="phone">Phone</label></span>
</div>
<div class="row"><span><input class="clean-slide" id="age" type="text" placeholder="Go for the high score!" /><label for="age">Age</label></span><span><input class="clean-slide" id="height" type="text" placeholder="Heels count" /><label for="height">Height</label></span><span><input class="clean-slide" id="weight" type="text" placeholder="Go ahead and lie" /><label for="weight">Weight</label></span>
</div>
<div class="row"><span><input class="gate" id="class" type="text" placeholder="Wizard!" /><label for="class">Class</label></span><span><input class="gate" id="element" type="text" placeholder="Five to choose from" /><label for="element">Element</label></span><span><input class="gate" id="move" type="text" placeholder="Secret book attack!" /><label for="move">Move</label></span>
</div>
<div class="row"><span><input class="skinny" id="english" type="text" placeholder="Do you speak it?" /><label for="english">English</label></span><span><input class="skinny" id="burger" type="text" placeholder="A Royale with cheese?" /><label for="burger">Burger</label></span><span><input class="skinny" id="wallet" type="text" placeholder="Bad Mother****er" /><label for="wallet">Wallet</label></span>
</div>
<div class="row"><span><input class="slide-up" id="card" type="text" placeholder="Fund me!" /><label for="card">Credit Card</label></span><span><input class="slide-up" id="expires" type="text" placeholder="Month Day, Year" /><label for="expires">Expires</label></span><span><input class="slide-up" id="security" type="text" placeholder="Public" /><label for="security">Security Code</label></span>
</div>
<div class="row"><span><input class="card-slide" id="knock" type="text" placeholder="Who's there?" /><label for="knock">Knock knock</label></span><span><input class="card-slide" id="max" type="text" placeholder="Max who?" /><label for="max">Max</label></span><span><input class="card-slide" id="out" type="text" placeholder="Sunuva..." /><label for="out">Maxed out card ;)</label></span>
</div>
<div class="row"><span><input class="swing" id="artist" type="text" placeholder="BO$$" /><label for="artist">Artist</label></span><span><input class="swing" id="song" type="text" placeholder="I don't give a ****" /><label for="song">Song</label></span><span><input class="swing" id="eyes" type="text" placeholder="Crazy" /><label for="eyes">Eyes</label></span>
</div>
<div class="row"><span><input class="balloon" id="state" type="text" placeholder="Liquid, solid, gaseous..." /><label for="state">State</label></span><span><input class="balloon" id="planet" type="text" placeholder="Probably Earth" /><label for="planet">Planet</label></span><span><input class="balloon" id="galaxy" type="text" placeholder="Milky Way?" /><label for="galaxy">Galaxy</label></span>
</div>

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/qltukposition: 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 heretop: 5px;bottom: 5px;background: #377D6A; // change this to #134A46border-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 heretop: 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 wayanimation: 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/365888496486985728display: 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 输入框相关推荐

html漂亮的单选框,纯css3实现漂亮的单选按钮radio
单选按钮radio是表单常见的元素,但是默认的单选按钮radio样式呆板不好看,因此通常设计人员会自己设计一个单选按钮radio,本文介绍用纯css3实现漂亮的单选按钮radio. 纯css3实现漂亮 ...
纯CSS3制作漂亮的价格表
阅读目录阐述 demo1 style.css demo2 style2.css 阐述网页上发布产品时,一般都有几套价格方案,通常我们将几套方案放在一起,用户可以相互比较决定购买哪个套餐. 最常见的 ...
14款CSS3炫酷表单input输入框美化效果【附源码】
这是一款效果非常酷的CSS3表单input输入框美化效果插件.为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验.这个CSS3表单input输入框美化插件就是一个很好的例子.这个插件 ...
css3搜索框呼出键盘,移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: 但要实现点击键盘右下角搜索,来发送请求,js代码如下( ...
CSS3 input 输入框蓝光特效
有时候我们在做 Java Web 小项目开发的时候,可能在设计前端的时候苦于没有好的布局.色彩搭配,跟接地气的说法就是做的界面比较高大上! 那么平时我们就要注意积累自己的素材了!下面这个HTML网页 ...
html5简单动画效果代码,分享12个简洁漂亮的纯CSS3进度条特效动画代码
进度条是很常用的一个用户体验项,用于表示事件的处理或加载状态,制作这些loading进度条我们通常会使用GIF图片来实现,但是这方法也有一些弊端,比如我要放大或改变颜色,这样就不好处理了. 要解决这些 ...
html 栏目切换幻灯片效果,很酷的切换效果纯CSS3幻灯片实现
很酷的切换效果纯CSS3幻灯片实现 11月 18, 2013 评论 (4) Sponsor CSS3实现给我们带来太多惊喜,FLASH能实现的动画,很多CSS3也可以实现,正如今天为大家展示的纯HT ...
移动端页面inputfile打不开_移动端input“输入框”常见问题及解决方法
转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...
在html中选项卡怎么做,纯css3制作选项卡
继上一篇文章后,突发奇想利用纯粹的css3和radio的特性来打造一个选项卡切换的效果普通的选项卡效果一般分为html+css+js来制作步骤如下: html做布局 css做样式 js添加切换效果 ...

纯 CSS3 实现漂亮的 input 输入框

纯 CSS3 实现漂亮的 input 输入框相关推荐

最新文章

热门文章