表单输入是可以从边界效果中受益的另一个常见设计元素。这款笔中的光滑动画可实现极好的微交互。毫无疑问，他们已经在用户心中成功点击了输入。这可能是一件小事，但会使体验变得更好。另外，您还会发现背景和标签效果。
html代码<div class="row">
<div class="container">
<h2>border effects</h2>
<div class="col-3"><input class="effect-1" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-2" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-3" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-4" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-5" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-6" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-7" type="text" placeholder="placeholder text" />
<span class="focus-border">
<i></i>
</span></div>
<div class="col-3"><input class="effect-8" type="text" placeholder="placeholder text" />
<span class="focus-border">
<i></i>
</span></div>
<div class="col-3"><input class="effect-9" type="text" placeholder="placeholder text" />
<span class="focus-border">
<i></i>
</span></div>
<h2>background effects</h2>
<div class="col-3"><input class="effect-10" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-11" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-12" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-13" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-14" type="text" placeholder="placeholder text" /></div>
<div class="col-3"><input class="effect-15" type="text" placeholder="placeholder text" /></div>
<h2>input with label effects</h2>
<div class="col-3 input-effect"><input class="effect-16" type="text" placeholder="" />
<label>first name</label></div>
<div class="col-3 input-effect"><input class="effect-17" type="text" placeholder="" />
<label>first name</label></div>
<div class="col-3 input-effect"><input class="effect-18" type="text" placeholder="" />
<label>first name</label></div>
<div class="col-3 input-effect"><input class="effect-19" type="text" placeholder="" />
<label>first name</label>
<span class="focus-border">
<i></i>
</span></div>
<div class="col-3 input-effect"><input class="effect-20" type="text" placeholder="" />
<label>first name</label>
<span c