表单输入是可以从边界成果中受益的另一个常常出现设计元素。这款笔中的润滑动画可成功极好的微交互。毫无不懂，他们曾经在用户心中成功点击了输入。这或者是一件大事，但会使体验变得更好。另外，您还会发现背景和标签成果。

厦门网站树立

HTML代码

CSS代码

/*=ResetCSS=============*/html,body{border:0;margin:0;padding:0;}body{font:14px"Lato",Arial,sans-serif;min-width:100%;min-height:100%;color:#666;}.container{margin:0auto;max-width:1200px;}*{margin:0;padding:0;box-sizing:border-box;}.row{float:left;width:100%;padding:20px050px;}h2{text-align:center;color:#2079df;font-size:28px;float:left;width:100%;margin:30px0;position:relative;line-height:58px;font-weight:400;}h2:before{content:"";position:absolute;left:50%;bottom:0;width:100px;height:2px;background-color:#2079df;margin-left:-50px;}/*=ResetCSSEnd=================*/

/*=inputfocuseffectscss===========================*/:focus{outline:none;}

.col-3{float:left;width:27.33%;margin:40px3%;position:relative;}/*necessarytogiveposition:relativetoparent.*/input[type="text"]{font:15px/24px"Lato",Arial,sans-serif;color:#333;width:100%;box-sizing:border-box;letter-spacing:1px;}

.effect-1,.effect-2,.effect-3{border:0;padding:7px0;border-bottom:1pxsolid#ccc;}

.effect-1~.focus-border{position:absolute;bottom:0;left:0;width:0;height:2px;background-color:#3399FF;transition:0.4s;}.effect-1:focus~.focus-border{width:100%;transition:0.4s;}

.effect-2~.focus-border{position:absolute;bottom:0;left:50%;width:0;height:2px;background-color:#3399FF;transition:0.4s;}.effect-2:focus~.focus-border{width:100%;transition:0.4s;left:0;}

.effect-3~.focus-border{position:absolute;bottom:0;left:0;width:100%;height:2px;z-index:99;}.effect-3~.focus-border:before,.effect-3~.focus-border:after{content:"";position:absolute;bottom:0;left:0;width:0;height:100%;background-color:#3399FF;transition:0.4s;}.effect-3~.focus-border:after{left:auto;right:0;}.effect-3:focus~.focus-border:before,.effect-3:focus~.focus-border:after{width:50%;transition:0.4s;}

.effect-4,.effect-5,.effect-6{border:0;padding:5px07px;border:1pxsolidtransparent;border-bottom-color:#ccc;transition:0.4s;}

.effect-4:focus,.effect-5:focus,.effect-6:focus{padding:5px14px7px;transition:0.4s;}

.effect-4~.focus-border{position:absolute;height:0;bottom:0;left:0;width:100%;transition:0.4s;z-index:-1;}.effect-4:focus~.focus-border{transition:0.4s;height:36px;border:2pxsolid#3399FF;z-index:1;}

.effect-5~.focus-border{position:absolute;height:36px;bottom:0;left:0;width:0;transition:0.4s;}.effect-5:focus~.focus-border{width:100%;transition:0.4s;border:2pxsolid#3399FF;}

.effect-6~.focus-border{position:absolute;height:36px;bottom:0;right:0;width:0;transition:0.4s;}.effect-6:focus~.focus-border{width:100%;transition:0.4s;border:2pxsolid#3399FF;}

.effect-7,.effect-8,.effect-9{border:1pxsolid#ccc;padding:7px14px9px;transition:0.4s;}

.effect-7~.focus-border:before,.effect-7~.focus-border:after{content:"";position:absolute;top:0;left:50%;width:0;height:2px;background-color:#3399FF;transition:0.4s;}.effect-7~.focus-border:after{top:auto;bottom:0;}.effect-7~.focus-borderi:before,.effect-7~.focus-borderi:after{content:"";position:absolute;top:50%;left:0;width:2px;height:0;background-color:#3399FF;transition:0.6s;}.effect-7~.focus-borderi:after{left:auto;right:0;}.effect-7:focus~.focus-border:before,.effect-7:focus~.focus-border:after{left:0;width:100%;transition:0.4s;}.effect-7:focus~.focus-borderi:before,.effect-7:focus~.focus-borderi:after{top:0;height:100%;transition:0.6s;}

.effect-8~.focus-border:before,.effect-8~.focus-border:after{content:"";position:absolute;top:0;left:0;width:0;height:2px;background-color:#3399FF;transition:0.3s;}.effect-8~.focus-border:after{top:auto;bottom:0;left:auto;right:0;}.effect-8~.focus-borderi:before,.effect-8~.focus-borderi:after{content:"";position:absolute;top:0;left:0;width:2px;height:0;background-color:#3399FF;transition:0.4s;}.effect-8~.focus-borderi:after{left:auto;right:0;top:auto;bottom:0;}.effect-8:focus~.focus-border:before,.effect-8:focus~.focus-border:after{width:100%;transition:0.3s;}.effect-8:focus~.focus-borderi:before,.effect-8:focus~.focus-borderi:after{height:100%;transition:0.4s;}

.effect-9~.focus-border:before,.effect-9~.focus-border:after{content:"";position:absolute;top:0;right:0;width:0;height:2px;background-color:#3399FF;transition:0.2s;transition-delay:0.2s;}.effect-9~.focus-border:after{top:auto;bottom:0;right:auto;left:0;transition-delay:0.6s;}.effect-9~.focus-borderi:before,.effect-9~.focus-borderi:after{content:"";position:absolute;top:0;left:0;width:2px;height:0;background-color:#3399FF;transition:0.2s;}.effect-9~.focus-borderi:after{left:auto;right:0;top:auto;bottom:0;transition-delay:0.4s;}.effect-9:focus~.focus-border:before,.effect-9:focus~.focus-border:after{width:100%;transition:0.2s;transition-delay:0.6s;}.effect-9:focus~.focus-border:after{transition-delay:0.2s;}.effect-9:focus~.focus-borderi:before,.effect-9:focus~.focus-borderi:after{height:100%;transition:0.2s;}.effect-9:focus~.focus-borderi:after{transition-delay:0.4s;}

.effect-10,.effect-11,.effect-12,.effect-13,.effect-14,.effect-15{border:0;padding:7px15px;border:1pxsolid#ccc;position:relative;background:transparent;}

.effect-10~.focus-bg{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#ededed;opacity:0;transition:0.5s;z-index:-1;}.effect-10:focus~.focus-bg{transition:0.5s;opacity:1;}

.effect-11~.focus-bg{position:absolute;left:0;top:0;width:0;height:100%;background-color:#ededed;transition:0.3s;z-index:-1;}.effect-11:focus~.focus-bg{transition:0.3s;width:100%;}

.effect-12~.focus-bg{position:absolute;left:50%;top:0;width:0;height:100%;background-color:#ededed;transition:0.3s;z-index:-1;}.effect-12:focus~.focus-bg{transition:0.3s;width:100%;left:0;}

.effect-13~.focus-bg:before,.effect-13~.focus-bg:after{content:"";position:absolute;left:0;top:0;width:0;height:100%;background-color:#ededed;transition:0.3s;z-index:-1;}.effect-13:focus~.focus-bg:before{transition:0.3s;width:50%;}.effect-13~.focus-bg:after{left:auto;right:0;}.effect-13:focus~.focus-bg:after{transition:0.3s;width:50%;}

.effect-14~.focus-bg:before,.effect-14~.focus-bg:after{content:"";position:absolute;left:0;top:0;width:0;height:0;background-color:#ededed;transition:0.3s;z-index:-1;}.effect-14:focus~.focus-bg:before{transition:0.3s;width:50%;height:100%;}.effect-14~.focus-bg:after{left:auto;right:0;top:auto;bottom:0;}.effect-14:focus~.focus-bg:after{transition:0.3s;width:50%;height:100%;}

.effect-15~.focus-bg:before,.effect-15~.focus-bg:after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;background-color:#ededed;transition:0.3s;z-index:-1;}.effect-15:focus~.focus-bg:before{transition:0.3s;width:50%;left:0;top:0;height:100%;}.effect-15~.focus-bg:after{left:auto;right:50%;top:auto;bottom:50%;}.effect-15:focus~.focus-bg:after{transition:0.3s;width:50%;height:100%;bottom:0;right:0;}

.effect-16,.effect-17,.effect-18{border:0;padding:4px0;border-bottom:1pxsolid#ccc;background-color:transparent;}

.effect-16~.focus-border{position:absolute;bottom:0;left:0;width:0;height:2px;background-color:#3399FF;transition:0.4s;}.effect-16:focus~.focus-border,.has-content.effect-16~.focus-border{width:100%;transition:0.4s;}.effect-16~label{position:absolute;left:0;width:100%;top:9px;color:#aaa;transition:0.3s;z-index:-1;letter-spacing:0.5px;}.effect-16:focus~label,.has-content.effect-16~label{top:-16px;font-size:12px;color:#3399FF;transition:0.3s;}

.effect-17~.focus-border{position:absolute;bottom:0;left:50%;width:0;height:2px;background-color:#3399FF;transition:0.4s;}.effect-17:focus~.focus-border,.has-content.effect-17~.focus-border{width:100%;transition:0.4s;left:0;}.effect-17~label{position:absolute;left:0;width:100%;top:9px;color:#aaa;transition:0.3s;z-index:-1;letter-spacing:0.5px;}.effect-17:focus~label,.has-content.effect-17~label{top:-16px;font-size:12px;color:#3399FF;transition:0.3s;}

.effect-18~.focus-border{position:absolute;bottom:0;left:0;width:100%;height:2px;z-index:99;}.effect-18~.focus-border:before,.effect-18~.focus-border:after{content:"";position:absolute;bottom:0;left:0;width:0;height:100%;background-color:#3399FF;transition:0.4s;}.effect-18~.focus-border:after{left:auto;right:0;}.effect-18:focus~.focus-border:before,.effect-18:focus~.focus-border:after,.has-content.effect-18~.focus-border:before,.has-content.effect-18~.focus-border:after{width:50%;transition:0.4s;}.effect-18~label{position:absolute;left:0;width:100%;top:9px;color:#aaa;transition:0.3s;z-index:-1;letter-spacing:0.5px;}.effect-18:focus~label,.has-content.effect-18~label{top:-16px;font-size:12px;color:#3399FF;transition:0.3s;}

.effect-19,.effect-20,.effect-21{border:1pxsolid#ccc;padding:7px14px;transition:0.4s;background:transparent;}

.effect-19~.focus-border:before,.effect-19~.focus-border:after{content:"";position:absolute;top:-1px;left:50%;width:0;height:2px;background-color:#3399FF;transition:0.4s;}.effect-19~.focus-border:after{top:auto;bottom:0;}.effect-19~.focus-borderi:before,.effect-19~.focus-borderi:after{content:"";position:absolute;top:50%;left:0;width:2px;height:0;background-color:#3399FF;transition:0.6s;}.effect-19~.focus-borderi:after{left:auto;right:0;}.effect-19:focus~.focus-border:before,.effect-19:focus~.focus-border:after,.has-content.effect-19~.focus-border:before,.has-content.effect-19~.focus-border:after{left:0;width:100%;transition:0.4s;}.effect-19:focus~.focus-borderi:before,.effect-19:focus~.focus-borderi:after,.has-content.effect-19~.focus-borderi:before,.has-content.effect-19~.focus-borderi:after{top:-1px;height:100%;transition:0.6s;}.effect-19~label{position:absolute;left:14px;width:100%;top:10px;color:#aaa;transition:0.3s;z-index:-1;letter-spacing:0.5px;}.effect-19:focus~label,.has-content.effect-19~label{top:-18px;left:0;font-size:12px;color:#3399FF;transition:0.3s;}

.effect-20~.focus-border:before,.effect-20~.focus-border:after{content:"";position:absolute;top:0;left:0;width:0;height:2px;background-color:#3399FF;transition:0.3s;}.effect-20~.focus-border:after{top:auto;bottom:0;left:auto;right:0;}.effect-20~.focus-borderi:before,.effect-20~.focus-borderi:after{content:"";position:absolute;top:0;left:0;width:2px;height:0;background-color:#3399FF;transition:0.4s;}.effect-20~.focus-borderi:after{left:auto;right:0;top:auto;bottom:0;}.effect-20:focus~.focus-border:before,.effect-20:focus~.focus-border:after,.has-content.effect-20~.focus-border:before,.has-content.effect-20~.focus-border:after{width:100%;transition:0.3s;}.effect-20:focus~.focus-borderi:before,.effect-20:focus~.focus-borderi:after,.has-content.effect-20~.focus-borderi:before,.has-content.effect-20~.focus-borderi:after{height:100%;transition:0.4s;}.effect-20~label{position:absolute;left:14px;width:100%;top:10px;color:#aaa;transition:0.3s;z-index:-1;letter-spacing:0.5px;}.effect-20:focus~label,.has-content.effect-20~label{top:-18px;left:0;font-size:12px;color:#3399FF;transition:0.3s;}

.effect-21~.focus-border:before,.effect-21~.focus-border:after{content:"";position:absolute;top:0;right:0;width:0;height:2px;background-color:#3399FF;transition:0.2s;transition-delay:0.2s;}.effect-21~.focus-border:after{top:auto;bottom:0;right:auto;left:0;transition-delay:0.6s;}.effect-21~.focus-borderi:before,.effect-21~.focus-borderi:after{content:"";position:absolute;top:0;left:0;width:2px;height:0;background-color:#3399FF;transition:0.2s;}.effect-21~.focus-borderi:after{left:auto;right:0;top:auto;bottom:0;transition-delay:0.4s;}.effect-21:focus~.focus-border:before,.effect-21:focus~.focus-border:after,.has-content.effect-21~.focus-border:before,.has-content.effect-21~.focus-border:after{width:100%;transition:0.2s;transition-delay:0.6s;}.effect-21:focus~.focus-border:after,.has-content.effect-21~.focus-border:after{transition-delay:0.2s;}.effect-21:focus~.focus-borderi:before,.effect-21:focus~.focus-borderi:after,.has-content.effect-21~.focus-borderi:before,.has-content.effect-21~.focus-borderi:after{height:100%;transition:0.2s;}.effect-21:focus~.focus-borderi:after,.has-conten.effect-21~.focus-borderi:after{transition-delay:0.4s;}.effect-21~label{position:absolute;left:14px;width:100%;top:10px;color:#aaa;transition:0.3s;z-index:-1;letter-spacing:0.5px;}.effect-21:focus~label,.has-content.effect-21~label{top:-18px;left:0;font-size:12px;color:#3399FF;transition:0.3s;}

.effect-22,.effect-23,.effect-24{border:0;padding:7px15px;border:1pxsolid#ccc;position:relative;background:transparent;}

.effect-22~.focus-bg{position:absolute;left:0;top:0;width:0;height:100%;background-color:transparent;transition:0.4s;z-index:-1;}.effect-22:focus~.focus-bg,.has-content.effect-22~.focus-bg{transition:0.4s;width:100%;background-color:#ededed;}.effect-22~label{position:absolute;left:14px;width:100%;top:10px;color:#aaa;transition:0.3s;z-index:-1;letter-spacing:0.5px;}.effect-22:focus~label,.has-content.effect-22~label{top:-18px;left:0;font-size:12px;color:#333;transition:0.3s;}

.effect-23~.focus-bg:before,.effect-23~.focus-bg:after{content:"";position:absolute;left:0;top:0;width:0;height:0;background-color:#ededed;transition:0.3s;z-index:-1;}.effect-23:focus~.focus-bg:before,.has-content.effect-23~.focus-bg:before{transition:0.3s;width:50%;height:100%;}.effect-23~.focus-bg:after{left:auto;right:0;top:auto;bottom:0;}.effect-23:focus~.focus-bg:after,.has-content.effect-23~.focus-bg:after{transition:0.3s;width:50%;height:100%;}.effect-23~label{position:absolute;left:14px;width:100%;top:10px;color:#aaa;transition:0.3s;z-index:-1;letter-spacing:0.5px;}.effect-23:focus~label,.has-content.effect-23~label{top:-18px;left:0;font-size:12px;color:#333;transition:0.3s;}

.effect-24~.focus-bg:before,.effect-24~.focus-bg:after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;background-color:#ededed;transition:0.3s;z-index:-1;}.effect-24:focus~.focus-bg:before,.has-content.effect-24~.focus-bg:before{transition:0.3s;width:50%;left:0;top:0;height:100%;}.effect-24~.focus-bg:after{left:auto;right:50%;top:auto;bottom:50%;}.effect-24:focus~.focus-bg:after,.has-content.effect-24~.focus-bg:after{transition:0.3s;width:50%;height:100%;bottom:0;right:0;}.effect-24~label{position:absolute;left:14px;width:100%;top:10px;color:#aaa;transition:0.3s;z-index:-1;letter-spacing:0.5px;}.effect-24:focus~label,.has-content.effect-24~label{top:-18px;left:0;font-size:12px;color:#333;transition:0.3s;}/*=inputfocuseffectscssEnd===============================*/

JS代码

//JavaScriptforlabeleffectsonly$(window).load(function(){$(".col-3input").val("");

$(".input-effectinput").focusout(function(){if($(this).val()!=""){$(this).addClass("has-content");}else{$(this).removeClass("has-content");}})});

标签： 厦门网站优化、 厦门网站制造、 网站树立、 厦门网页设计、 厦门网站树立公司、 厦门网站树立、 输入css表单加上输入时的特效优化用户体验成果、 网站树立、 网站设计、 CSS3、 网站制造、 HTML5、 厦门网站设计、 网站设计、 网站保养、 网站制造、

本文地址： https://yihaiquanyi.com/article/ff4f1c2c13d170ef17a1.html

上一篇：每个广告群组都有什么每个广告群组只能有一...
下一篇：网站制造软件手机版下载网站制造HTML5厦门...