<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>input下拉横线动画实现</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <link href="https://cdn.bootcss.com/jqueryui/1.12.0-rc.2/jquery-ui.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdn.bootcss.com/jqueryui/1.12.0-rc.2/jquery-ui.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> body{ background-color: #fff } .form-line{ border: 0 none;background-image: linear-gradient(#f44336,#f44336),linear-gradient(gray,gray); background-size: 0px 2px,100% 1px; background-repeat: no-repeat;background-position: center bottom,center calc(100% - 1px); background-color: rgba(255,255,255,0); } /* input[type="text"]:focus{ background-size: 100% 2px,100% 1px; transition: all .5s; border: none; outline: none; }*/ .input-focus{ background-size: 100% 2px,100% 1px; transition: all .3s; border: none; outline: none; } select,input{ height: 25px; width:300px; font-size:16px; color:#373737; background-color: transparent; } input:focus{ outline:none; border-color:transparent; } .input-g{ padding: 100px 200px; position: relative; } .input-g .ipt-label{ z-index: -100; position: absolute; color:#aaa; font-size: 15px; font-weight:normal; } </style> </head> <body> <div class="input-g"> <label for="" class="ipt-label">编程语言</label> <input type="text" class="form-line" id="tags"/> </div> </body> <script> $(function(){ /* autocomplete开始 */ /* autocomplete数据 */ var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); /* autocomplete结束 */ //输入框点击事件 $(".form-line").click(function(){ //$(this).css({"backgroundSize":"100% 2px,100% 1px","transition":"all .5s",'border':"none","outline":"none"}); $(this).prev().animate({'top':"75px","font-size":"16px"},300); }); //输入框获取到焦点 $(".form-line").focus(function(){ $(this).addClass("input-focus"); }); //输入框失去焦点事件 $(".form-line").blur(function(){ if(!$(this).val()){ $(this).prev().animate({'top':"100px","font-size":"18px"},300); } $(this).removeClass("input-focus"); }); }) </script>
效果图：
