基于html+css做一個(gè)好看的可翻轉(zhuǎn)登錄注冊(cè)界面

發(fā)布時(shí)間：2019-11-18 08:48:17 作者：佚名

我要評(píng)論

這篇文章主要介紹了基于html+css做一個(gè)好看的可翻轉(zhuǎn)登錄注冊(cè)界面,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

做一個(gè)好看的可翻轉(zhuǎn)登錄注冊(cè)界面

前言

最近在嘗試做網(wǎng)盤(pán)，使用的技術(shù)棧大概是 .net core + MVC + Mysql + Layui，主要目的是通過(guò)這個(gè)具體的項(xiàng)目，熟悉熟悉 .net core 開(kāi)發(fā)，.net 的未來(lái)就是他了！

我的設(shè)想

在完成后端的一部分建設(shè) 之后，我把目光投向了前端——登陸注冊(cè)，由于這個(gè)網(wǎng)盤(pán)是用來(lái)試手的個(gè)人項(xiàng)目，我并不想用曾經(jīng)用過(guò)的制作方式——登錄和注冊(cè)界面分開(kāi)來(lái)做。我試圖講這兩個(gè)功能合到一個(gè)頁(yè)面上，并且以一種不是很 "Low" 的方式呈現(xiàn)出來(lái)。

你也可以認(rèn)為我只是單純的懶，不想再多搞一個(gè)頁(yè)面

所以排除了曾經(jīng)使用過(guò)的點(diǎn)擊按鈕跳出登錄/注冊(cè) 表單，排除了比較僵硬的使用選項(xiàng)卡切換登錄/注冊(cè) 之后，我瞄上了翻轉(zhuǎn) 效果。

看到那個(gè) sign up 和 log in 之后我就想到，拿這兩個(gè)超鏈接做點(diǎn)文章或許是不錯(cuò)的選擇

用戶(hù)點(diǎn)擊 sign up 之后從登錄翻轉(zhuǎn)到注冊(cè)，點(diǎn)擊 log in 從注冊(cè)翻轉(zhuǎn)到登錄

從技術(shù)上來(lái)說(shuō)應(yīng)該是不難的，但是 B 格看起來(lái)立刻就高了不少?。。。?！

具體效果可以直接拉到最下面

具體實(shí)現(xiàn)

Html

<body>
  <div class="mainbody middle">
    <form class="form-box front">
      <div>
        <h1>Login</h1>
      </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>
    <!-- 對(duì)的你沒(méi)看錯(cuò)，上下兩個(gè)表單基本上沒(méi)區(qū)別，一個(gè)front，一個(gè)back -->
    <form class="form-box back">
      <div>
        <h1>Register</h1>
      </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 {
  /*顏色這個(gè)看個(gè)人喜好*/
  background: darkslategrey;
  /*字體這個(gè)看個(gè)人喜好*/
  font-family: sans-serif;
}

/*主要是規(guī)定中間表單尺寸，調(diào)整到自己覺(jué)得好看就行了*/
.mainbody {
  height: 440px;
  width: 400px;
}

/*居中效果*/
.middle {
  /*使左上角對(duì)應(yīng)到父元素的中心*/
  top: 50%;
  left: 50%;
  position: absolute;
  /*向左向上偏移50%*/
  transform: translate(-50%, -50%);
}

.form-box {
  width: 100%;
  height: 100%;
  margin: auto;
  background: darkcyan;
  /* 我覺(jué)得這個(gè)圓角大小剛剛好 */
  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度，背面朝向用戶(hù)，我這邊選y軸的 */
.back {
  transform: rotateY(-180deg);
}

.front,
.back {
  position: absolute;
  /* 然后設(shè)置為背面朝向用戶(hù)時(shí)不可見(jiàn) */
  backface-visibility: hidden;
  /* 我覺(jué)得用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)整了一下，感覺(jué)還不錯(cuò)的樣式，你可以改成其他的好看點(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");
});

效果

看起來(lái)好像還行的樣子啊

可以考慮在 transfrom 后面加點(diǎn) perspective ，增強(qiáng)立體感

我用的 perspective(600px)

不管你們?cè)趺聪耄凑矣X(jué)得這個(gè)效果還是挺綠的

總結(jié)

以上所述是小編給大家介紹的基于html+css做一個(gè)好看的可翻轉(zhuǎn)登錄注冊(cè)界面，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！