现在的很多网站都将输入框做成了动态的效果，这样对于用户体检来说非常好，这篇文章分别用Angularjs和原生JS两种方法来实现动态效果的输入框，具有一定的参考价值，有需要的小伙伴们可以来参考借鉴。

在刚开始没有给输入框添加焦点之前，没有任何效果。见下图： 然后点击其中任何一个，焦点就会触发一个动画，动画的结果见图二： 中间的输入登录密码文字，会自动添加到顶部（原谅我没有截取到动画过程的图片）。 我测试了一下，这样的效果只有高级浏览器支持（IE只有IE10、IE11、Edge支持）。 下面我来把代码贴上来，原理很简单，就是通过事件触发类名的增加和删除。具体的动画由CSS3来实现，这也是为什么低级浏览器不支持的原因。 原生JS实现示例： <meta charset=UTF-