input表单输入框聚焦动画系列

表单动画1

html源码

<div class="inputBox">
    <input class="effect-1" type="text" placeholder="Placeholder Text">
    <span class="focus-border"></span>
</div>

css源码

inputBox class类用于布局，就是一个input容器，便于观看，我这里设置每一行分为3个列（可根据自己需求设置）。

.inputBox {
   
      float: left;
      width: 27.33%;
      margin: 40px 3%;
      position: relative; 
}       

然后为input元素设置一些通用样式。

input[type="text"]{
   
    font: 15px/24px "Lato", Arial, sans-serif;