로그인 회원 가입 인터페이스 멋진합니다

머리말

최근 네트워크 디스크을하려고, 기술 스택을 사용하는 것은 아마도 .NET 코어 MVC + + + MySQL을 Layui이 주요 목적은 알아가는,이 특정 프로젝트를 통해 .NET의 핵심 개발자, 닷넷 미래는 그입니다!

내 비전

의 뒤쪽 끝 부분의 완료에 건물 프런트 엔드에 내 명소 후 - 등록 로그인이 네트워크 디스크의 개별 프로젝트의 손을 테스트하는 데 사용되기 때문에, 내가 사용 된 생산 방법을 사용하지 않습니다 - 별도의 로그인 및 등록 인터페이스 않습니다. 한 페이지에이 두 가지 기능을 이야기하려고하고 있지 매우에서 "낮은" 방법 아웃 발표했다.

~~난 당신이 또한 단지 게으른 페이지에 참여하지 않으려 할 수 있다고 생각~~

후 그래서 로그인 / 등록 양식 중 버튼 클릭을 사용한 제외, 내가 목표로했다, 등록 / 스위치 로그인에 상대적으로 뻣뻣한 탭의 사용을 배제 롤오버 효과.

톱 가입을 하고 로그인 좋은 선택이 될 수있는 글을이 두 하이퍼 링크를 가지고, 나는 생각

사용자가 클릭 가입 등록 로그인에서 뒤집기 후, 클릭 에 로그 에 로그온 등록에서 플립

기술적으로는 어렵지 않을해야하지만, B 세포는 높은 바로 아를 많이 봐! ! ! !

~~특정 효과는 직접 바닥을 뽑아 될 수있다~~

실현

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>
    <!-- 对的你没看错，上下两个表单基本上没区别，一个front，一个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 {
  /*颜色这个看个人喜好*/
  background: darkslategrey;
  /*字体这个看个人喜好*/
  font-family: sans-serif;
}

/*主要是规定中间表单尺寸，调整到自己觉得好看就行了*/
.mainbody {
  height: 440px;
  width: 400px;
}

/*居中效果*/
.middle {
  /*使左上角对应到父元素的中心*/
  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旋转180度，背面朝向用户，我这边选y轴的 */
.back {
  transform: rotateY(-180deg);
}

.front,
.back {
  position: absolute;
  /* 然后设置为背面朝向用户时不可见 */
  backface-visibility: hidden;
  /* 我觉得用linear顺滑一点 */
  transition: 0.3s linear;
}

/* 将front旋转180度 */
.middle-flip .front {
  transform: rotateY(180deg);
}
/* 将back旋转180度 */
.middle-flip .back {
  transform: rotateY(0deg);
}

/* 我调整了一下，感觉还不错的样式，你可以改成其他的好看点的 */
p {
  margin: 15px auto;
  padding: 0;
  font-size: 16px;
  color: white;
  display: block;
  text-align: center;
}
a {
  color: aqua;
  cursor: pointer;
}

// 点击sigup触发翻转样式
$("#sigup").click(function() {
  $(".middle").toggleClass("middle-flip");
});
// 点击login触发翻转样式
$("#login").click(function() {
  $(".middle").toggleClass("middle-flip");
});

효과

좋아 보이는 아처럼 보인다

간주 될 수 있습니다 transfrom추가 후 perspective, 입체 강화

I 사용 perspective(600px)

아무리 당신이 어떻게 생각하는지, 어쨌든, 나는 효과가 여전히 매우 녹색 생각

멋진 인터페이스는 로그인 회원 가입 이성을 상실 할 수 있는지 확인

로그인 회원 가입 인터페이스 멋진합니다

머리말

내 비전

실현

효과

추천