input表单输入框焦点动画效果

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表示第一种，以此类推。.effect-1{border:1pxsolid#ccc;填充：7px14px9px；过渡：0.4s;}.effect-1~.focus-border:before,.effect-1~.focus-border:after{content:"";位置：绝对；顶部：0；右：0；宽度：0；高度：2px；背景色：#3399FF；过渡：0.2s；transition-delay:0.2s;}.effect-1~.focus-border:after{top:auto;底部：0；右：自动；左：0；transition-delay:0.6s;}.effect-1~.focus-borderi:before,.effect-1~.focus-borderi:after{content:"";位置：绝对；顶部：0；左：0；宽度：2px；高度：0；背景色：#3399FF；transition:0.2s;}.effect-1~.focus-borderi:after{left:auto;右：0；顶部：自动；底部：0；transition-delay:0.4s;}.effect-1:focus~.focus-border:before,.effect-1:focus~.focus-border:after{width:100%;过渡：0.2s；transition-delay:0.6s;}.effect-1:focus~.focus-border:after{transition-delay:0.2s;}.effect-1:focus~.focus-borderi:before,.effect-1:focus~.focus-borderi:after{height:100%;transition:0.2s;}.effect-1:focus~.focus-borderi:after{transition-delay:0.4s;}表格动画2html源码