输入表单输入框焦点动画系列
时间：2023-04-05 18:56:40
HTML5
css源码inputBox类用于布局，是一个方便查看的输入容器。这里我设置每一行分为3列（可以根据自己的需要设置）。.inputBox{浮动：左；宽度：27.33%；边距：40px3%；位置：相对；然后为输入元素设置一些通用样式。input[type="text"]{font:15px/24px"Lato",Arial,sans-serif;颜色：#333；宽度：100%；框大小：边框框；letter-spacing:1px;}:focus{outline:none;}effect-1类表示不同输入形式获得焦点的动画样式类型，effect-1表示第一种，以此类推。.focus-border是输入框获得焦点后的边框样式。它使用绝对单位，位置在输入框的左下角，高度为2个像素，宽度一开始设置为0，所以是不可见的。并设置一个0.4秒的过渡动画效果。设置.focus-border的宽度为100%，当输入框获得焦点，输入框有内容时。.effect-3{边界：0;填充：7px0；border-bottom:1pxsolid#ccc;}.effect-1~.focus-border{position:absolute;底部：0；左：0；宽度：0；高度：2px；背景色：#3399FF；过渡：0.4s;}.effect-1:focus~.focus-border{width:100%;transition:0.4s;}表格动画2html源码
css源码.effect-2{border:0;填充：7px0；border-bottom:1pxsolid#ccc;}.effect-2~.focus-border{position:absolute;底部：0；左：50%；宽度：0；高度：2px；背景色：#3399FF；过渡：0.4s;}.effect-2:focus~.focus-border{width:100%;过渡：0.4s；left:0;}表格动画3html源代码
csssourcecode.effect-3{border:0;padding:7px0;border-bottom:1pxsolid#ccc;}.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:{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;移其所欲，建其所需，码字不易，且行且珍惜！
