您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用html和css怎么制作一個可翻轉(zhuǎn)登錄注冊界面,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
Html
<body> <div class="mainbody middle"> <form class="form-box front"> <div> <h2>Login</h2> </div> <div> <input class="input-normal" type="text" placeholder="UserAccount" /> <input class="input-normal" type="password" placeholder="PassWord" /> <button class="btn-submit" type="submit"> LOGIN </button> </div> <div> <p style="margin-top: 40px">If you don't have account.Please</p> <p>Click here to <a id="signin">Sign Up</a></p> </div> </form> <!-- 對的你沒看錯,上下兩個表單基本上沒區(qū)別,一個front,一個back --> <form class="form-box back"> <div> <h2>Register</h2> </div> <div> <input class="input-normal" type="text" placeholder="UserAccount" /> <input class="input-normal" type="password" placeholder="PassWord" /> <button class="btn-submit" type="submit"> Register </button> </div> <div> <p style="margin-top: 40px">Have a account ? You can</p> <p>Click here to <a id="login">Log in</a></p> </div> </form> </div> </body>
Css
body { /*顏色這個看個人喜好*/ background: darkslategrey; /*字體這個看個人喜好*/ font-family: sans-serif; } /*主要是規(guī)定中間表單尺寸,調(diào)整到自己覺得好看就行了*/ .mainbody { height: 440px; width: 400px; } /*居中效果*/ .middle { /*使左上角對應(yīng)到父元素的中心*/ top: 50%; left: 50%; position: absolute; /*向左向上偏移50%*/ transform: translate(-50%, -50%); } .form-box { width: 100%; height: 100%; margin: auto; background: darkcyan; /* 我覺得這個圓角大小剛剛好 */ border-radius: 40px; } .input-normal { width: 220px; height: 38px; margin: 30px auto; padding: 0; text-align: center; border-radius: 20px; outline: none; display: block; transition: 0.3s; border: 1px solid #e6e6e6; } .btn-submit { width: 100px; height: 36px; margin: auto; font-size: 18px; text-align: center; color: white; border-radius: 20px; display: block; background: darkslategrey; transition: 0.3s; } .front { transform: rotateY(0deg); } /* 將back旋轉(zhuǎn)180度,背面朝向用戶,我這邊選y軸的 */ .back { transform: rotateY(-180deg); } .front, .back { position: absolute; /* 然后設(shè)置為背面朝向用戶時不可見 */ backface-visibility: hidden; /* 我覺得用linear順滑一點(diǎn) */ transition: 0.3s linear; } /* 將front旋轉(zhuǎn)180度 */ .middle-flip .front { transform: rotateY(180deg); } /* 將back旋轉(zhuǎn)180度 */ .middle-flip .back { transform: rotateY(0deg); } /* 我調(diào)整了一下,感覺還不錯的樣式,你可以改成其他的好看點(diǎn)的 */ p { margin: 15px auto; padding: 0; font-size: 16px; color: white; display: block; text-align: center; } a { color: aqua; cursor: pointer; } js // 點(diǎn)擊sigup觸發(fā)翻轉(zhuǎn)樣式 $("#sigup").click(function() { $(".middle").toggleClass("middle-flip"); }); // 點(diǎn)擊login觸發(fā)翻轉(zhuǎn)樣式 $("#login").click(function() { $(".middle").toggleClass("middle-flip"); });
效果
看起來好像還行的樣子啊
可以考慮在 transfrom 后面加點(diǎn) perspective ,增強(qiáng)立體感
我用的 perspective(600px)
上述就是小編為大家分享的使用html和css怎么制作一個可翻轉(zhuǎn)登錄注冊界面了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。