仿阿里云盘网页登录界面源码-源码分享

xsshare • 2024-02-21 • 源码 • 1360 阅读

介绍

使用html+js+css仿的登录界面，简约，实用，以下目录为源码，可自行研究，最底下也有打包好的文件，下载后可以直接打开使用。

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>登录页</title>
  <link rel="stylesheet" href="login.css">
</head>
<body>
  <img src="logo.svg" class="logo" alt="">

  <div class="login-app">
    <!-- 选择登录方式部分 -->
    <div class="login-header" onclick="checkRadio()">
      <input type="radio" name="login-opt" id="message" checked="checked">
      <label for="message" class="m-btn">登录</label>
      <input type="radio" name="login-opt" id="username">
      <label for="username" class="u-btn">注册</label>
      <input type="radio" name="login-opt" id="qrcode">
      <label for="qrcode" class="q-btn">关于</label>
    </div>
    <!-- 登录表单部分 -->
    <div class="login-body">
      <div id="form-bar">
        <!-- <form-append></form-append> -->
        <!-- 短信登录表单 -->
        <form action="" class="m-form">
          <input type="text" placeholder="请输入账号">
          <input type="text" placeholder="请输入密码">
          
          <button class="login-btn">登录</button>
        </form>
        <!-- 账号登录表单 -->
        <form action="" class="u-form">
          <input type="text" placeholder="请输入账号">
          <input type="text" placeholder="请输入密码">
          <button class="login-btn">注册</button>
        </form>
        <!-- 扫码登录表单 -->
        <form action="" class="q-form">
          <div class="qrcode">
            <img src="qrcode.png" alt="">
          </div>
        </form>
        <!-- <form-append></form-append> -->
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

css源码

body{
  background-color: #ecefff;
  user-select: none;
  /* 这样用户点按钮的时候就不会选中文字, 更有沉浸感 */
  /* 唉, 我没有教人做事的意思 */

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

.logo{
  width: 216px;
  margin-bottom: 60px;
}

.login-app{
  width: 348px;
  margin-bottom: 60px;
}

.login-header{
  display: flex;
}
.login-header input[type="radio"]{
  display: none;
}
.login-header label{
  background-color: #f5f5f6;
  font-size: 18px;
  color: rgba(37, 38, 43, .36);

  padding: 16px;
  text-align: center;
  width: 100%;
  /* 这里并不是非得100%,利用的是flex的自动收缩,只要大于1/3就好了 */

  cursor: pointer;
}
.login-header .m-btn{
  border-top-left-radius: 12px;
}
.login-header .q-btn{
  border-top-right-radius: 12px;
}

#message:checked + .m-btn,
#username:checked + .u-btn,
#qrcode:checked + .q-btn{
  background-color: #fff;
  color: #25262b;
  cursor: default;
}

/* 接下来是个悲伤的故事, 我不想重演了 */
/* #message:checked~#form-bar{
  left: 0;
}

#username:checked~#form-bar{
  left: 348px;
}

#qrcode:checked~#form-bar{
  left: 696px;
} */
/* 又忘了只能影响同级之后的兄弟元素... */
/* 只能等CSS4了... */

.login-body{
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  background-color: #fff;

  -webkit-border-radius: 0 0 20px 20px;
  -moz-border-radius: 0 0 20px 20px;
  -ms-border-radius: 0 0 20px 20px;
  -o-border-radius: 0 0 20px 20px;
}

#form-bar{
  display: flex;

  transition: transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* 最初的打算其实本来是cubic-bezier(.25,.01,.25,1.3),但是觉得自己调的没有预设好最后就用了联想出来的 */
  /* 这里其实是很重要的知识点:贝塞尔曲线. 但是我录视频的时候忘了讲!!! */
  /* 括号里的四个数字两两一组,分别是两个控制点的横坐标和纵坐标 */
  /* 前面那个点和(时间轴和效果轴的起点(0,0))的连线是第一段曲度的控制线 */
  /* 后面那个点是和(时间轴和效果轴的终点(1,1))连线是第二段曲度的控制线 */
  /* 用过钢笔工具的话 就会有一个比较直观的理解 */

  /* transform: translateX(-100px); */

  -webkit-transition: transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* 这个时候我又有两个思路了 */
/* 首先想到的是,在两边各加一块白色的东西 */
/* form-append{
  width: 100px;
  flex-shrink: 0;
} */

.login-body form{
  flex-shrink: 0;
  /* 使之不会被收缩,百度吧我讲不清我太菜了 */
  width: 100%;

  box-sizing: border-box;
  padding: 22px;

  position: relative;
}

.login-body input{
  outline: none;
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  margin-bottom: 16px;
  background-color: rgba(39, 39, 41, .04);
  border: 1px solid transparent;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;

  font-size: 14px;
  padding: 1px 12px;
  color: #25262b;
}
.login-body input::placeholder{
  color: rgba(37, 38, 43, .36);
}
.login-body input:focus{
  border: 1px solid rgba(99, 125, 255, .48);
  background-color: #fff;
}

.m-form .vercode-btn{
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #637dff;
  background-color: transparent;
  border: 1px solid rgba(99, 125, 255, .24);

  position: absolute;
  right: 36px;
  margin: 8px 0;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.login-body .login-btn{
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(
    129.12deg,/* 沿着这个角度的线渐变 */
    #446dff,/* 渐变起始颜色 */
    rgba(99, 125 ,255, .75)/* 渐变终点颜色 */
  );/* 为什么数值这么奇怪? -因为我直接copy官方的 */

  color: #fff;
  font-size: 16px;

  margin-top: 16px;
  margin-bottom: 60px;
}

button{
  cursor: pointer;
}

.m-form #sure{
  display: none;
}
.m-form label.tobesure{
  position: absolute;
  border:  2px solid rgba(132, 133, 141, .2);
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;

  left: 22px;
}
#sure:checked + label.tobesure{
  background-color: #637dff;
}
/* 文字位置安排好了, 现在来整个小勾√ */
label.tobesure::after{
  content: '';
  border:  2px solid #fff;
  position: absolute;
  width: 6px;
  height: 3px;
  border-top: none;
  border-right: none;
  transform: translate(-50%, -50%) rotate(-45deg);
  /* 先平移再旋转好(方便的那个"好")定位... */
  /* 这样就形成了一个勾勾 */
  /* 然后定位至圆圈中间 */
  top: 45%;
  left: 50%;
  /* 等于说重新声明了transform, 所以应该放在一起 */

  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
  -moz-transform: translate(-50%,-50%) rotate(-45deg);
  -ms-transform: translate(-50%,-50%) rotate(-45deg);
  -o-transform: translate(-50%,-50%) rotate(-45deg);
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
}

#sure:not(:checked) ~ .login-btn{
  opacity: .5;
  cursor: not-allowed;
  /* 试了:disabled和unchecked和:not(:checked)都不行,就只好让按钮原本半透明,:checked以后不透明 */
  /* 结果也没用 */
  /* 哦是因为元素顺序, 又忘了, 真丢人 */
  /* 这里懒得复现问题了! 所以是这么个呈现形式! 这是当时的注释! */
}

label.tobesure{
  bottom: 45px;
}
label.tobesure p{
  margin: 0;
  margin-left: 20px;
  width: 280px;

  font-size: 12px;
  line-height: 1.5;
  color: rgba(37, 38, 43, .36);

  position: relative;
  bottom: 3px;
  /* relative是相对自己原本的位置移动 */
  /* 这里也就是向上移动3px */
  /* 其实只是为了一点强迫症 */
}
label.tobesure p a{
  text-decoration: none;
  color: #637dff;
  padding: 0 5px;
}

.qrcode{
  width: 128px;
  height: 128px;
  box-shadow: 0px 0px 1px 1px rgba(28, 28, 32, 0.05), 0px 8px 24px rgba(28, 28, 32, 0.12);
  padding: 8px;
  box-sizing: border-box;/* 就应该写*里, 后悔了, 来不及了 */
  border-radius: 10px;

  position: absolute;
  transform: translate(-50%, -50%);
  top: 40%;
  left: 50%;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.qrcode img{
  width: 100%;
}

js源码

// 纯css计划告吹,老老实实js
let login_opt = document.getElementsByName('login-opt');
let form_bar = document.getElementById('form-bar');

// 我最开始想到的思路是
function checkRadio0(){
  if(login_opt[0].checked){
    form_bar.style.transform = 'translateX(0)';
    console.log('1')
  } else if(login_opt[1].checked){
    form_bar.style.transform = 'translateX(-348px)';
    console.log('2')
  } else{
    form_bar.style.transform = 'translateX(-692px)';
  }
}

//而后我又有这么个思路
function checkRadio(){
  for(let i =0; i < login_opt.length; i++){
    if(login_opt[i].checked){
      form_bar.style.transform = 'translateX(' + (-348*i) + 'px)';
    }
  }
}

下载地址

来源：蓝奏网盘

仅限用于学习和研究目的，不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容

如果您喜欢本站，点击这儿捐助本站

THE END

源码

打赏

海报

仿阿里云盘网页登录界面源码-源码分享

介绍使用html+js+css仿的登录界面，简约，实用，以下目录为源码，可自行研究，最底下也有打包好的文件，下载后可以直接打开使用。 html源码 <!DOCTYPE ht……

搜索内容

仿阿里云盘网页登录界面源码-源码分享

介绍

html源码

css源码

js源码

下载地址

取消回复

共有 0 条评论

捐助

目录