時間：2023-09-20 22:24:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-20 22:24:01 來源：網(wǎng)站運(yùn)營
超炫酷html+css+javascript實(shí)現(xiàn)登錄頁面模板：利用Css3 html5實(shí)現(xiàn)的超炫酷的登錄 很早以前，我們?yōu)榇蠹曳窒磉^不少外觀和功能都非常不錯的登錄表單，有些登錄表單應(yīng)用了CSS3特性添加了更絢麗的動畫特效，比如這款精美的CSS3登錄注冊切換表單就相當(dāng)華麗。今天要分享的這款動畫登錄表單也非常不錯，輸入框中帶有小圖標(biāo)，可隨著焦點(diǎn)的獲取和失去是現(xiàn)實(shí)和隱藏，點(diǎn)擊登錄時會有一段自定義的登錄動畫，并最后提示登錄成功。 代碼中有具體功能注釋 如果有不懂的 可以隨時溝通
在線咨詢
<!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='驗(yàn)證碼' 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>歡迎登陸后臺管理系統(tǒng)</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>認(rèn)證中...</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調(diào)用路徑", 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("未知錯誤！"); }}//生成驗(yàn)證碼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; }}}關(guān)鍵詞：模板,實(shí)現(xiàn)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
