炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
生活随笔
收集整理的這篇文章主要介紹了
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一：源碼獲取
這兩天根據(jù)需求寫了一個(gè)比較好看的有動(dòng)態(tài)效果的登錄注冊(cè)切換頁(yè)面，這里我將源碼資源分享給大家，大家可以直接免費(fèi)下載使用哦，沒(méi)有 vip 的小伙伴找我私聊發(fā)送"登錄注冊(cè)"即可我給你發(fā)文件，此登錄注冊(cè)框放在任何管理系統(tǒng)都是非常炫酷的點(diǎn)睛之筆！
一款非常炫酷登錄注冊(cè)頁(yè)面-Javascript文檔類資源-CSDN下載一個(gè)非常炫酷的的登錄注冊(cè)頁(yè)面，登錄注冊(cè)切換由jQuery實(shí)現(xiàn)，原理簡(jiǎn)單易懂并且十幾行代碼就完成了更多下載資源、學(xué)習(xí)資料請(qǐng)?jiān)L問(wèn)CSDN下載頻道.https://download.csdn.net/download/weixin_52212950/85799335
二：效果展示
登錄頁(yè)面：?
?注冊(cè)頁(yè)面：
動(dòng)態(tài)切換效果：切換時(shí)采用了一種滑動(dòng)切換的效果
三：實(shí)現(xiàn)代碼：
此效果動(dòng)態(tài)的實(shí)現(xiàn)原理也是非常簡(jiǎn)單的，使用 jQuery 封裝好的動(dòng)畫函數(shù)即可，以下是其功能實(shí)現(xiàn)的js代碼，使用了 jQuery 封裝好的 animate 動(dòng)畫函數(shù)，在點(diǎn)擊切換注冊(cè)或登錄框時(shí)就會(huì)調(diào)用 animate，其內(nèi)部回調(diào)函數(shù)內(nèi)容為其登錄和注冊(cè)框哪個(gè)顯示哪個(gè)不顯示，從而完成一種視覺(jué)上的切換效果，其實(shí)歸根到底還是 display 的顯隱切換，有 jQuery 基礎(chǔ) 小伙伴就不難理解。
- 在這里在帶領(lǐng)大家復(fù)習(xí)一下 animate 動(dòng)畫函數(shù)
- animate?(?params?,?speed?,??easing?,??fn?)???????params?為必寫參數(shù)?！！！
| 參數(shù) | params | speed | easing | fn |
| 含義 | 寫想要更改的樣式屬性，以對(duì)象形式傳遞，必寫 | 速度參數(shù)，可寫為 slow，nomarl， fast，也可以寫成特定的毫秒數(shù)值 | 用來(lái)指定特定的過(guò)度效果，默認(rèn)為 swing，可換為 linear | 回調(diào)函數(shù)，在動(dòng)畫執(zhí)行完后調(diào)用動(dòng)畫函數(shù)內(nèi)的內(nèi)容 |
- 注意以對(duì)象形式傳入要改變的屬性，并且設(shè)置動(dòng)畫函數(shù)的必須是元素，不能是文檔，例如讓整個(gè)頁(yè)面移動(dòng)時(shí)，不能給?$(document)?設(shè)置動(dòng)畫函數(shù)，而應(yīng)該給?$('html')?設(shè)置動(dòng)畫函數(shù)，這點(diǎn)很重要！！！！！！！！！！
四：完整代碼
HTML 代碼:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>login</title><link rel="stylesheet" href="./login.css"><script src="./jQuery.js"></script><script src="./login.js"></script> </head> <body><div class="background"> <!-- 登錄 --><div class="login"><p class="login-value">LOG IN</p><form action=""><input type="text" class="login-num" placeholder="請(qǐng)輸入賬號(hào)"><input type="password" class="login-pwd" placeholder="請(qǐng)輸入密碼"><input type="button" value="忘記密碼？" class="forget"><input type="submit" value="登錄" class="login-button"></form></div><div class="change-register-box"><p class="a">還沒(méi)有賬戶？</p><p class="b">點(diǎn)擊加入我們吧</p><button class="change-register-button">SIGN UP ></button></div> <!-- 注冊(cè) --><div class="register"><p class="signup-value">SIGN UP</p><button class="reset">重新獲取</button><form action=""><input type="text" class="signup-num" placeholder="請(qǐng)輸入賬號(hào)"><input type="password" class="signup-pwd" placeholder="請(qǐng)輸入密碼"><input type="password" class="signup-repwd" placeholder="再次輸入確認(rèn)密碼"><div class="random">????</div><input type="text" class="write" placeholder="請(qǐng)輸入驗(yàn)證碼"><input type="submit" value="注冊(cè)" class="signup-button"></form></div><div class="change-login-box"><p class="c">歡迎加入</p><p class="d">快去登陸看看吧</p><button class="change-login-button">< LOG IN</button></div></div> </body> </html>CSS代碼：
body{background: url(./img/src=http___pic1.win4000.com_wallpaper_2020-10-12_5f83b7c13d0b9.jpg&refer=http___pic1.win4000.webp);background-size: 110% ,110%; } .background{width: 900px;height: 400px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: rgba(10, 10, 10, 0.598); } /* 登錄框 */ .login{position: absolute;top: -12%;left: 60px;width: 600px;height: 500px;background-color: rgb(249, 249, 249);z-index: 10;box-shadow: 0 0 12px 0.6px rgb(106, 106, 106);/* display: none; */ } .login-value{width: 600px;font-size: 40px;font-weight: bold;color: rgb(255, 108, 108);padding-left: 60px;margin-top: 90px; } .login-num{width: 485px;height: 50px;outline: none;margin-top: -5px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey; } .login-pwd{width: 485px;height: 50px;outline: none;margin-top: 30px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey; } .forget{position: absolute;bottom: 90px;left: 60px;width: 220px;height: 60px;border: 1.5px solid rgb(151, 151, 151);background-color:transparent;font-size: 18px ;font-weight: bold;letter-spacing: 2px;color: rgb(113, 113, 113); } .forget:hover{background-color: rgb(235, 235, 235); } .login-button{position: absolute;bottom: 90px;right: 60px;width: 220px;height: 60px;border: none;background-color: rgb(222, 59, 59);;font-size: 20px ;font-weight: bold;letter-spacing: 10px;color: rgb(255, 255, 255);text-shadow: 1px 1px 1px rgb(138, 138, 138); } .login-button:hover{background-color: rgb(199, 38, 38); } /* 切換注冊(cè)框的盒子 */ .change-register-box{position: absolute;right: 0px;width: 240px;height: 400px;background-color: transparent;/* display: none; */ } .a{position: absolute;top: 90px;left: 62px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.846);letter-spacing: 2px; } .b{position: absolute;top: 140px;left: 46px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.858);letter-spacing: 2px; } .change-register-button{position: absolute;left: 46px;bottom: 120px;width: 140px;height: 50px;border: 1.5px solid #fff;background-color: transparent;letter-spacing: 2px;color: #fff;font-size: 16px;font-weight: bold;border-radius: 5px; } .change-register-button:hover{border: 1.5px solid rgb(217, 217, 217);color: rgb(217, 217, 217); } /* 注冊(cè)框 */ .register{position: absolute;top: -12%;right: 60px;width: 600px;height: 500px;background-color: rgb(249, 249, 249);display: none;z-index: 10;box-shadow: 0 0 12px 0.6px rgb(106, 106, 106); }.change-login-box{position: absolute;left: 0;width: 240px;height: 400px;background-color: transparent;display: none; } .signup-value{width: 600px;font-size: 40px;font-weight: bold;color: rgb(255, 108, 108);padding-left: 40px;margin-top: 30px; } .signup-num{width: 485px;height: 50px;outline: none;margin-top: -18px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey; } .signup-pwd{width: 485px;height: 50px;outline: none;margin-top: 15px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey; } .signup-repwd{width: 485px;height: 50px;outline: none;margin-top: 15px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey; } .random{position: absolute;top: 305px;left: 60px;width: 110px;height: 47px;border: 1px solid black;line-height :47px; text-align: center;font-size: 27px;font-weight: bold;letter-spacing: 3px;background-color: rgb(221, 246, 255);color: grey; } .reset{position: absolute;top: 305px;left: 186px;width: 150px;height: 47px;border: 1px solid black;line-height :47px; text-align: center;font-size: 16px;font-weight:600;letter-spacing: 3px;background-color: rgb(255, 224, 146);border-radius: 6px;color: rgb(92, 92, 92);/* text-shadow: 2px 1px 1px grey; */ } .write{position: absolute;top: 305px;right: 58px;width: 180px;height: 47px;border: 1px solid black;outline: none;font-size: 22px;padding-left: 10px; } .signup-button{position: absolute;bottom: 50px;right: 60px;width: 482px;height: 60px;border: none;background-color: rgb(222, 59, 59);;font-size: 20px ;font-weight: bold;letter-spacing: 15px;color: rgb(255, 255, 255);text-shadow: 1px 1px 1px rgb(138, 138, 138); } .signup-button:hover{background-color: rgb(199, 38, 38); } .c{position: absolute;top: 90px;left: 79px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.846);letter-spacing: 2px; } .d{position: absolute;top: 140px;left: 46px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.858);letter-spacing: 2px; } .change-login-button{position: absolute;left: 46px;bottom: 120px;width: 140px;height: 50px;border: 1.5px solid #fff;background-color: transparent;letter-spacing: 2px;color: #fff;font-size: 16px;font-weight: bold;border-radius: 5px; } .change-login-button:hover{border: 1.5px solid rgb(217, 217, 217);color: rgb(217, 217, 217); }創(chuàng)作不易，你的支持就是我最大的動(dòng)力！
總結(jié)
以上是生活随笔為你收集整理的炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： pandas 向已有的excel指定的行
- 下一篇： 运用Chrome浏览器ADB插件获取页面