登录 界面

已于 2023-11-14 16:36:42 修改
阅读量215 收藏
点赞数 4
文章标签： html5 css
于 2023-11-14 15:34:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chihirozy/article/details/134400304
版权 

<!DOCTYPE html>
<html lang="en">
<!-- https://codepen.io/danielkvist/pen/LYNVyPL -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      /* COLORS */
      --white: #e9e9e9;
      --gray: #333;
      --blue: #0367a6;
      --lightblue: #008997;

      /* RADII */
      --button-radius: 0.7rem;

      /* SIZES */
      --max-width: 758px;
      --max-height: 420px;

      font-size: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }

    body {
      align-items: center;
      background-color: var(--white);
      background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg");
      /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */
      /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: grid;
      height: 100vh;
      place-items: center;
    }

    .form__title {
      font-weight: 300;
      margin: 0;
      margin-bottom: 1.25rem;
    }

    .link {
      color: var(--gray);
      font-size: 0.9rem;
      margin: 1.5rem 0;
      text-decoration: none;
    }

    .container {
      background-color: var(--white);
      border-radius: var(--button-radius);
      box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
        0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
      height: var(--max-height);
      max-width: var(--max-width);
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .container__form {
      height: 100%;
      position: absolute;
      top: 0;
      transition: all 0.6s ease-in-out;
    }

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

    .container.right-panel-active .container--signin {
      transform: translateX(100%);
    }

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

    .container.right-panel-active .container--signup {
      animation: show 0.6s;
      opacity: 1;
      transform: translateX(100%);
      z-index: 5;
    }

    .container__overlay {
      height: 100%;
      left: 50%;
      overflow: hidden;
      position: absolute;
      top: 0;
      transition: transform 0.6s ease-in-out;
      width: 50%;
      z-index: 100;
    }

    .container.right-panel-active .container__overlay {
      transform: translateX(-100%);
    }

    .overlay {
      background-color: var(--lightblue);
      background: url("https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg");
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      left: -100%;
      position: relative;
      transform: translateX(0);
      transition: transform 0.6s ease-in-out;
      width: 200%;
    }

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

    .overlay__panel {
      align-items: center;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      position: absolute;
      text-align: center;
      top: 0;
      transform: translateX(0);
      transition: transform 0.6s ease-in-out;
      width: 50%;
    }

    .overlay--left {
      transform: translateX(-20%);
    }

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

    .overlay--right {
      right: 0;
      transform: translateX(0);
    }

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

    .btn {
      background-color: var(--blue);
      background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
      border-radius: 20px;
      border: 1px solid var(--blue);
      color: var(--white);
      cursor: pointer;
      font-size: 0.8rem;
      font-weight: bold;
      letter-spacing: 0.1rem;
      padding: 0.9rem 4rem;
      text-transform: uppercase;
      transition: transform 80ms ease-in;
    }

    .form>.btn {
      margin-top: 1.5rem;
    }

    .btn:active {
      transform: scale(0.95);
    }

    .btn:focus {
      outline: none;
    }

    .form {
      background-color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 3rem;
      height: 100%;
      text-align: center;
    }

    .input {
      background-color: #fff;
      border: none;
      padding: 0.9rem 0.9rem;
      margin: 0.5rem 0;
      width: 100%;
    }

    @keyframes show {

      0%,
      49.99% {
        opacity: 0;
        z-index: 1;
      }

      50%,
      100% {
        opacity: 1;
        z-index: 5;
      }
    }
  </style>
</head>

<body>
  <div class="container right-panel-active">
    <!-- Sign Up -->
    <div class="container__form container--signup">
      <form action="#" class="form" id="form1">
        <h2 class="form__title">Sign Up</h2>
        <input type="text" placeholder="User" class="input" />
        <input type="email" placeholder="Email" class="input" />
        <input type="password" placeholder="Password" class="input" />
        <button class="btn">Sign Up</button>
      </form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
      <form action="#" class="form" id="form2">
        <h2 class="form__title">Sign In</h2>
        <input type="email" placeholder="Email" class="input" />
        <input type="password" placeholder="Password" class="input" />
        <a href="#" class="link">Forgot your password?</a>
        <button class="btn">Sign In</button>
      </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
      <div class="overlay">
        <div class="overlay__panel overlay--left">
          <button class="btn" id="signIn">Sign In</button>
        </div>
        <div class="overlay__panel overlay--right">
          <button class="btn" id="signUp">Sign Up</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const fistForm = document.getElementById("form1");
    const secondForm = document.getElementById("form2");
    const container = document.querySelector(".container");

    signInBtn.addEventListener("click", () => {
      container.classList.remove("right-panel-active");
    });

    signUpBtn.addEventListener("click", () => {
      container.classList.add("right-panel-active");
    });

    fistForm.addEventListener("submit", (e) => e.preventDefault());
    secondForm.addEventListener("submit", (e) => e.preventDefault());

  </script>
</body>

</html>
Chihirozy
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
android模拟实现QQ登录界面
07-14
这个资源主要是使用Android模拟开发了一个QQ登录界面的小案例。 内容概要：了解基础Android组件的使用，以及shape和selector组件美化。 适合人群：初学Android开发的小萌新，可以利用这个小案例巩固Android基础控件的使用。 能学到什么：可以加深Android布局的使用，以及基础组件的使用知识。
简易登录界面
06-19
简易的登录界面，可以用于各种登录界面 。
电脑网页进入csdn官网
TZfoever的博客
03-12 2249
第一步：点开随便一个浏览器，最上面有个网址栏。第四步：点击enter键，如下为官网。第二步：清空网址栏目。第三步：输入csdn。
python简单的登录界面
06-15
话不多说，直接上代码
MATLAB登录界面设置
05-09
1. 剔除坐标框的坐标轴数据 2. 登录按钮转接主程序 3. 退出按钮关闭所有界面 4. 可以自定义背景图像 5. 密码错误有提示并且可以清空密码文本和账号文本
安卓开发实战之登录界面跳转
07-18
实现一个简单的用户登录界面，功能如下： 1、默认不存储用户信息，默认隐藏密码。 2、能通过勾选框记住密码、显示密码，点击登录后实现页面跳转至主页面。 3、通过“登录”进入主界面，通过“退出”退出APP，主界面通过“返回”返回到登录页面 4、登录界面显示登录的用户名及当前用户的登录时间
登录界面及主页（多种）
03-08
登录界面及主页（多种） 自己做的登录页 CSS样式自自己整理 自己整理的，重新上传，积分自增长太多了
简单的html登录界面
m0_54149550的博客
05-29 3万+
登陆界面效果图
登录界面
weixin_44544845的博客
05-02 1866
往往一个项目中不乏缺少一个登录界面，而登陆页面是最基础的，下面是登录界面要实现的效果。 2、在完成一个登录界面前，首先要先写出验证码的登录，一个验证码的验证都验证不了，何来的用户名和密码的验证，所以，首先得验证出来验证码。在写验证时，需要引用一个ValidCodeUtils的类来用。验证码的四个步骤： <1>生成长度为随机的验证码字符串 <2>根据生成...
CSND的登录页面源代码
vi_to的博客
05-06 377
五一都在写web作业，没时间打Java代码,现在把其中的比较的简单的页面分享出来 效果如下： 代码如下： <head> <meta charset="utf-8"> <title>CSND登录框</title> <style type="text/css"> body{ background-color: #FFFFFF...
我为大家带来了二十张登录界面！！！
txaz6的博客
10-04 1万+
小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。 上次给大家分享了15张的移动端登录界面：https://juejin.cn/post/7010922696988966919 这次给大家带来了20张Web登录界面，真的是辛辛苦苦收集了好久，如果有喜欢的不妨给我点个赞吧，感谢！ 以下所有设计图均来自网络，如有侵权，请联系我删除，感谢各位分享~ 本人最喜欢的一张????：（大家在评论区投票选出最喜欢的一张吧） 按钮的圆角让我看了真的是身心愉悦
Android Studio实现简单的QQ登录界面
振华OPPO的博客世界
06-06 5万+
QQ是我们日常生活使用最多的软件之一，包含登录界面和进入后的聊天界面、好友列表界面和空间动态界面等。登录界面的制作比较简单，主要考验布局的使用，是实现QQ项目的第一步。现在APP开发的首要工作都是实现登录页面，所以学会了QQ登录界面对以后的软件开发有着很重要的作用。
登录界面（基础）
weixin_65537313的博客
11-07 319
登录界面（简单代码）
网页设计之登录界面
m0_58887730的博客
03-24 1934
1.创建一个registe.css文件，里面存放界面的设置，包含大小字体颜色等。2.创建一个html文件，存放对用户名密码手机号的验证信息。
登录界面制作
haier123888的博客
12-05 3842
1、新建项目“登录界面”。选择【文件】→【新建】→【项目】，弹出“新建项目”界面，选择【windows桌面】→【windows窗体应用】，命名“登录界面”。 2、设置窗体的基本属性。修改窗体的标题，命名为“登录界面”，添加背景图片。 3、向窗体中拖入相应的控件。 4、实现登录的功能。双击【登录】按钮，进入登录的单击事件，在单击事件中，对用户的用户名和密码进行验证。 首先添加如下...
登录界面的制作
qianyaner_的博客
05-19 117
登录界面的制作
超级简单的登录注册界面（HTML+CSS）
weixin_74947024的博客
05-19 1662
初学html和css，然后用它写了一个简单的登录注册页面
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
热门推荐
道阻且长，行则将至。
04-20 25万+
推荐十款好看的登录注册界面，赶紧收藏起来吧！ 界面一：简约版 界面二 界面三 界面四 界面五 界面六 界面七 界面八 界面九 界面十
intellij 登录界面
最新发布
03-22
下面是IntelliJ IDEA的登录界面介绍： IntelliJ IDEA的登录界面通常包含以下几个主要部分： 1. 欢迎界面：当你打开IntelliJ IDEA时，会首先显示一个欢迎界面，上面展示了最近打开的项目列表、创建新项目的选项以及...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值