在刚开始没有给输入框添加焦点之前，没有任何效果。见下图：
然后点击其中任何一个，焦点就会触发一个动画，动画的结果见图二：
中间的输入登录密码文字，会自动添加到顶部（原谅我没有截取到动画过程的图片）。
我测试了一下，这样的效果只有高级浏览器支持（IE只有IE10、IE11、Edge支持）。
下面我来把代码贴上来，原理很简单，就是通过事件触发类名的增加和删除。具体的动画由CSS3来实现，这也是为什么低级浏览器不支持的原因。
原生JS实现示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } .demo{ border: 1px solid gray; width: 300px; height: 200px; position: relative; left: 200px; top: 200px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .demo input{ width: 200px; height: 100px; position: absolute; left: 50px; top: 50px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .demo label{ position: absolute; top: 100px; left:80px; font-size: 14px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .activeDemo{ border: 1px #fd715a solid; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .activeInput{ border: 1px #fd715a solid; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .activeLabel{ font-size: 10px; color: #fd715a; background: white; -webkit-transform: translate(-20px, -58px); -moz-transform: translate(-20px, -58px); -ms-transform: translate(-20px, -58px); -o-transform: translate(-20px, -58px); transform: translate(-20px, -58px); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3 linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } </style> </head> <body> <div> <input type="text"/> <label for="inputDemo">请输入内容</label> </div> </body> <script> var addEvent= function (obj,event,callback) { if(obj.addEventListener){ obj.addEventListener(event,callback) }else if(obj.attachEvent){ obj.attachEvent('on'+event,callback) } }; var demo=document.querySelector(".demo"); var input=document.querySelector("#inputDemo"); var label=document.querySelector(".demo label"); addEvent(input,"focus", function () { demo.className+=" activeDemo"; this.className+=" activeInput"; label.className+=" activeLabel"; }); addEvent(input,'blur', function () { this.className=this.className.replace(/\s*activeInput\s*/,' '); label.className=label.className.replace(/\s*activeLabel\s*/,' '); demo.className=demo.className.replace(/\s*activeDemo\s*/,' '); }) </script> </html>
下面是用Angular实现的一个简单的效果，原理很简单，就是在指令中通操作DOM来实现动画。
Angularjs实现示例：
<!DOCTYPE html> <html lang="en" ng-app="formAnimation"> <head> <meta charset="UTF-8"> <title></title> <script src="https://www.jb51.net/lib/angular.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/lib/angular-animate.js" type="text/javascript"></script> <style> *{ padding: 0; margin: 0; } .container{ width: 445px; height: 370px; border-left: 10px solid #d4d4d4; position: relative; left: 100px; top: 100px; } .container input{ position: absolute; top: 100px; left: 25px; height: 40px; width: 385px; } .container span{ width: 80px; height: 25px; font-size: 10px; background: rgb(237,97,83); color: white; position: absolute; left: 300px; top: 109px; line-height: 25px; text-align: center; } .container .labelStyle{ position: absolute; left: 45px; top: 115px; font-size: 14px; color: #929292; z-index: 999; font: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .inputActive{ border: 2px solid rgb(237,97,90); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .labelActive{ position: absolute; left: 45px; top: 115px; z-index: 999; background: white; border: 2px solid white; color: rgb(237,97,90); font-size: 10px; -webkit-transform: translate(-10px, -23px); -moz-transform: translate(-10px, -23px); -ms-transform: translate(-10px, -23px); -o-transform: translate(-10px, -23px); transform: translate(-10px, -23px); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } </style> </head> <body ng-controller="formAnimationController"> <form action="" form-animation> <label for="inputDemo">请输入内容</label> <input type="text" /> <span>请填写内容</span> </form> </body> <script> angular.module('formAnimation',[]) .controller('formAnimationController', function () { }) .directive('formAnimation',['$animate', function ($animate) { return { restrict:'EA', link: function (scope, element, attr) { element.find("input").on('focus', function () { element.find("input").addClass("inputActive"); element.find("label").removeClass("labelStyle").addClass("labelActive") }); element.find("input").on('blur', function () { element.find("input").removeClass("inputActive"); element.find("label").removeClass("labelActive").addClass("labelStyle"); }) } } }]) </script> </html>
总结