![6022d5584dbace808cd1e76ced6c5f00.gif](https://img-blog.csdnimg.cn/img_convert/6022d5584dbace808cd1e76ced6c5f00.gif)
表单动画1
html源码
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; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;} :focus{ outline: none;}
effect-1 class类就代表这不同的input表单获取焦点的动画样式种类, effect-1就代表第一种,以此类推。
.focus-border是输入框聚焦后的边框样式。它采用绝对单位,位置在输入框的左下角位置,高度为2像素,开始时宽度被设置为0,不可见。并设置了0.4秒的过渡动画效果。
当输入框聚焦时以及在输入框中有内容时,将.focus-border的宽度设置为100%。
.effect-3{ border: 0; padding: 7px 0; border-bottom: 1px solid #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;}
![5f2d8a4493a6d68688dcdf1cd371401c.gif](https://img-blog.csdnimg.cn/img_convert/5f2d8a4493a6d68688dcdf1cd371401c.gif)
表单动画2
html源码
css源码
.effect-2{ border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}.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;}
![546e6ad2ae5edacf078a0def822e26a3.gif](https://img-blog.csdnimg.cn/img_convert/546e6ad2ae5edacf078a0def822e26a3.gif)
表单动画3
html源码
css源码
.effect-3{ border: 0; padding: 7px 0; border-bottom: 1px solid #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: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;}
搬你想搬,盖你所需,码字不易,且行且珍惜!