一个炫酷的登录页面

1、代码简介

这是一个具有炫酷特效的html登录页面

2、代码实现

<template>
  <div class="login">
    <div class="container" ref="container" id="container">
      <div class="form-container sing-up-container">
        <!--注册-->
        <form action="#" onsubmit="return false">
          <h1>用户注册</h1>
          <div class="social-container">
            <a href="#" class="social"><span class="iconfont icon-QQ"></span></a>
            <a href="#" class="social"><span class="iconfont icon-weixin"></span></a>
            <a href="#" class="social"><span class="iconfont icon-weibo"></span></a>
          </div>
          <span>您可以选择以上几种方式注册一个账户！</span>
          <input type="text" placeholder="用户名">
          <input type="password" placeholder="密码">
          <input type="email" placeholder="邮箱">
          <button type="submit" id="send-code">发送验证码</button>
          <input type="text" placeholder="验证码">
          <button type="submit">注册</button>
        </form>
      </div>

      <div class="form-container sing-in-container">
        <!--登录-->
        <form action="#" onsubmit="return false">
          <h1>用户登录</h1>
          <div class="social-container">
            <a href="#" class="social"><span class="iconfont icon-QQ"></span></a>
            <a href="#" class="social"><span class="iconfont icon-weixin"></span></a>
            <a href="#" class="social"><span class="iconfont icon-weibo"></span></a>
          </div>
          <span>您可以选择以上几种方式登录您的账户！</span>
          <input type="text" placeholder="用户名">
          <input type="password" placeholder="密码">
          <a href="#">忘记密码？</a>
          <button type="submit" @click="login">登录</button>
        </form>
      </div>

      <!--侧边栏-->
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panner overlay-left">
            <h1>已有账号？</h1>
            <p>快快点我去进行登录吧。</p>
            <button class="ghost" @click="signIn">登录</button>
          </div>
          <div class="overlay-panner overlay-right">
            <h1>没有账号？</h1>
            <p>点击注册一个专属你的账号吧。</p>
            <button class="ghost" @click="signUp">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<style scoped>

h1 {
  margin: 0.2rem;
  font-size: 1.2rem;
}

p {
  font-size: 1rem;
  line-height: 1.5rem;
  /*字体变淡*/
  font-weight: 100;
  margin: 1.2rem 0;
  /*字间距*/
  letter-spacing: 0.1rem;
}

span {
  font-size: 0.8rem;
  margin: 1.2rem 0;
}

a {
  color: #333;
  font-size: 1rem;
  /*下划线消失*/
  text-decoration: none;
}

.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0 auto;
}

.container {
  /*相对定位*/
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  padding: 0.6rem;
  width: 50rem;
  height: 35rem;
  /*溢出隐藏*/
  overflow: hidden;
  max-width: 100vw;
  min-height: 70vh;
}

.form-container form {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 1.8rem;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.social-container {
  margin: 0.6rem 0;
}

.social-container a {
  border: 1px solid #eee;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  height: 1.8rem;
  width: 1.8rem;
}

.iconfont{
  font-size: 100%;
}

.social-container a:hover {
  opacity: 0.8;
}

.form-container input {
  width: 100%;
  height: 2.2rem;
  text-indent: 1rem;
  border-bottom: 1px solid #ccc;
  border-top: none;
  border-left: none;
  border-right: none;
  /*选中input取消边框*/
  outline: none;
  margin: 0.6rem 0;
}

.form-container button:active {
  /*点击按钮时缩小*/
  transform: scale(0.95, 0.95);
}

.form-container button {
  background: #417dff;
  color: white;
  border: 1px solid;
  outline: none;
  cursor: pointer;
  width: 5rem;
  border-radius: 8px;
  transition: all 100ms ease-in;
  margin: 0.6rem 0;
  font-size: 0.6rem;
  padding: 0.5rem 0;
}

button#send-code {
  width: 100%;
}

button.ghost {
  background: transparent;
  border: 1px solid #fff;
  outline: none;
  cursor: pointer;
  width: 5rem;
  border-radius: 8px;
  transition: all 800ms ease-in;
  margin: 0.6rem 0;
  padding: 0.5rem 0;
  color: #fff;
  font-size: 0.6rem;
}

button.ghost:active {
  transform: scale(0.95, 0.95);
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.5s ease-in;
}

.sing-up-container {
  left: 0;
  width: 50%;
  opacity: 0;
  z-index: 1;
}

.sing-in-container {
  left: 0;
  width: 50%;
  z-index: 2;
}

.overlay {
  background: #417dff;
  width: 200%;
  height: 100%;
  position: relative;
  left: -100%;
  transition: all 0.6s ease-in-out;
  color: white;
}

.overlay-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: all 0.6s ease-in-out;
  z-index: 99;

}

.overlay-panner {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  padding: 0 2.2rem;
}

.overlay-right {
  right: 0;
}

/*侧边栏动画*/
.container.right-panel-active .overlay-container {
  transform: translateX(-100%);
}

/*登录动画*/
.container.right-panel-active .sing-in-container {
  transform: translateX(100%);
}

/*注册动画*/
.container.right-panel-active .sing-up-container {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
}

.container.right-panel-active .overlay {
  transform: translateX(50%);
}

.container.right-panel-active .overlay-left {
  transform: translateX(0);
}

.container.right-panel-active .overlay-right {
  transform: translateX(20%);
}

</style>

3、注意事项

代码中的图标是基于iconfont实现的，需要在html中引入下方的一行代码
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4552773_0mn3zih7cvrg.css" />