时间：2023-09-20 22:24:01 | 来源：网站运营
时间：2023-09-20 22:24:01 来源：网站运营
超炫酷html+css+javascript实现登录页面模板：利用Css3 html5实现的超炫酷的登录 很早以前，我们为大家分享过不少外观和功能都非常不错的登录表单，有些登录表单应用了CSS3特性添加了更绚丽的动画特效，比如这款精美的CSS3登录注册切换表单就相当华丽。今天要分享的这款动画登录表单也非常不错，输入框中带有小图标，可随着焦点的获取和失去是现实和隐藏，点击登录时会有一段自定义的登录动画，并最后提示登录成功。 代码中有具体功能注释 如果有不懂的 可以随时沟通
在线咨询
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <title>登录界面</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> <!--必要样式--> <link href="css/styles.css" rel="stylesheet" type="text/css" /> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <link href="css/loaders.css" rel="stylesheet" type="text/css" /></head><body> <div class='login'> <div class='login_title'> <span>管理员登录</span> </div> <div class='login_fields'> <div class='login_fields__user'> <div class='icon'> <img alt="" src='img/user_icon_copy.png'> </div> <input name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" value="kbcxy" /> <div class='validation'> <img alt="" src='img/tick.png'> </div> </div> <div class='login_fields__password'> <div class='icon'> <img alt="" src='img/lock_icon_copy.png'> </div> <input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off"> <div class='validation'> <img alt="" src='img/tick.png'> </div> </div> <div class='login_fields__password'> <div class='icon'> <img alt="" src='img/key.png'> </div> <input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off"> <div class='validation' style="opacity: 1; right: -5px;top: -3px;"> <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas> </div> </div> <div class='login_fields__submit'> <input type='button' value='登录'> </div> </div> <div class='success'> </div> <div class='disclaimer'> <p>欢迎登陆后台管理系统</p> </div> </div> <div class='authent'> <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;"> <div class="loader-inner ball-clip-rotate-multiple"> <div></div> <div></div> <div></div> </div> </div> <p>认证中...</p> </div> <div class="OverWindows"></div> </script></body></html>/*****/:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #CECFD2; opacity: 1;}::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #CECFD2; opacity: 1;}input:-ms-input-placeholder { color: #CECFD2; opacity: 1;}input::-webkit-input-placeholder { color: #CECFD2; opacity: 1;}html,body { padding: 0; margin: 0; height: 100%; font-size: 16px; background-repeat: no-repeat; background-position: left top; background-color: #242645; color: #fff; font-family: 'Source Sans Pro'; background-size: 100%; background-image: url(../img/Starry.jpg);}h1 { font-size: 2.8em; font-weight: 700; letter-spacing: -1px; margin: 0.6rem 0;}h1>span { font-weight: 300;}h2 { font-size: 1.15em; font-weight: 300; margin: 0.3rem 0;}main { width: 95%; max-width: 1000px; margin: 4em auto; opacity: 0;}main.loaded { transition: opacity .25s linear; opacity: 1;}main header { width: 100%;}main header>div { width: 50%;}main header>.left,main header>.right { height: 100%;}main .loaders { width: 100%; box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap;}main .loaders .loader { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: column; flex-grow: 1; flex-shrink: 0; flex-basis: 25%; max-width: 25%; height: 200px; align-items: center; justify-content: center;}.J_codeimg { width: 85px; height: 36px; padding: 3px; z-index: 0; color: #FFF;}//Ajax提交function AjaxPost(Url, JsonData, LodingFun, ReturnFun) { $.ajax({ type: "post", url: Url, data: JsonData, dataType: 'json', async: 'false', beforeSend: LodingFun, error: function() { AjaxErro({ "Status": "Erro", "Erro": "500" }); }, success: ReturnFun });}//示例//AjaxPost("ajax调用路径", ajax传参,// function () {// //ajax加载中// },// function (data) {// //ajax返回 // //AjaxErro(data);// })//弹出function ErroAlert(e) { var index = layer.alert(e, { icon: 5, time: 2000, offset: 't', closeBtn: 0, title: '错误信息', btn: [], anim: 2, shade: 0 }); layer.style(index, { color: '#777' });}//Ajax 错误返回处理function AjaxErro(e) { if (e.Status == "Erro") { switch (e.Erro) { case "500": top.location.href = '/Erro/Erro500'; break; case "100001": ErroAlert("错误 : 错误代码 '10001'"); break; default: ErroAlert(e.Erro); } } else { layer.msg("未知错误！"); }}//生成验证码var code = "";function createCode(e) { code = ""; var codeLength = 4; var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); for (var i = 0; i < codeLength; i++) { var charIndex = Math.floor(Math.random() * 60); code += selectChar[charIndex]; } if (code.length != codeLength) { createCode(e); } if (canGetCookie == 1) { setCookie(e, code, 60 * 60 * 60, '/'); } else { return code; }}}关键词：模板,实现
