做一个好看的可翻转登录注册界面

做一个好看的登录注册界面

前言

最近在尝试做网盘,使用的技术栈大概是 .net core + MVC + Mysql + Layui,主要目的是通过这个具体的项目,熟悉熟悉 .net core 开发,.net 的未来就是他了!

我的设想

在完成后端的一部分 建设 之后,我把目光投向了前端——登陆注册,由于这个网盘是用来试手的个人项目,我并不想用曾经用过的制作方式——登录和注册界面分开来做。我试图讲这两个功能合到一个页面上,并且以一种不是很 "Low" 的方式呈现出来。

你也可以认为我只是单纯的懒,不想再多搞一个页面

所以排除了曾经使用过的点击按钮跳出 登录/注册 表单,排除了比较僵硬的使用选项卡切换 登录/注册 之后,我瞄上了 翻转 效果。

看到那个 sign uplog in 之后我就想到,拿这两个超链接做点文章或许是不错的选择

用户点击 sign up 之后从登录翻转到注册,点击 log in 从注册翻转到登录

从技术上来说应该是不难的,但是 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;
}

js

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

效果

看起来好像还行的样子啊

可以考虑在 transfrom 后面加点 perspective ,增强立体感

我用的 perspective(600px)

不管你们怎么想,反正我觉得这个效果还是挺绿的

原文地址:https://www.cnblogs.com/CollapseNav/p/11879695.html

时间: 11-16

做一个好看的可翻转登录注册界面的相关文章

HTML登录注册界面怎么制作?

在没有学习CSS样式的前提下,是如何做一个简单的注册界面的. 一.表单标签(form) 首先我们先写一个<form></form>的标签,form标签属于表单标签,通常我们的登录注册界面都是有提交数据的,是和服务器交互用的,用户在提交信息后,给服务器,服务器再根据提交的信息保存,这个时候就需要form标签了. form标签里面常见属性有两种: action:这个是表单提交给某服务器的地址. method:用什么方式提交.通常我们常见的是:get(得到.成为)和post这两种,区别就

手把手教你从零开始做一个好看的 APP

前言 从零开始,手把手带你实现一个「专注睡前的 APP」.睡觉之前如果能有一个 APP,能让我们写一写这一天的见闻或者心得,同时又能看一会段子.瞄一会好看的妹子,放松一下疲惫的身心那该多好,这也是我完成这个 APP 的原因.APP 的全部代码我已经分享到?Github?上了,需要的直接 点击这里,如果喜欢的话,麻烦给个 star,谢谢啦. 本文为这一系列文章的总述,如果觉得篇幅过长,请点击下面的连接 手把手教你从零开始做一个好看的 APP - Day one 手把手教你从零开始做一个好看的 AP

Python 实现简单的登录注册界面

Python 实现简单的登录注册界面 注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import messagebox 主要实现的功能 首先在python字典里定义一对值{'admin':'admin'}如果登录成功显示"How are you! admin". 如果字典里没有一一对应的一对值{'Username':'Password'},则需要注册,紧接着再登录. 实现过程 登录界面 首先初始化一

家庭记账本app实现登录注册界面以及仿微信操作界面(共4个实现一个)遇到了麻烦

今天学习了数据的创建,以及关于数据库的相关操作. 今天主要是实现了对于数据库的增加和查找. 具体的代码如下: 首先是数据库的创建: DBOpenMessage.java package com.example.thetrueappwen; import android.content.Context; import android.database.sqlite.SQLiteDatabase; import android.database.sqlite.SQLiteOpenHelper; im

百思不得姐第3天:登录注册界面搭建

一:登录注册的界面效果如图 二:界面的搭建 1:登陆界面一般都是moda的模式:新建控制器,勾选xib,则系统会自动关联类,并且自动连线关联view(若是后创建的控制器的xib,则类名相同,关联类,在fileOwer处连线view),而我们自己不用去设置控制器view的frame.或是freeform,只需要更改控制器view的尺寸,例如4.7寸,那么在别的机型上运行正常适配.2:一般背景比较好看的都为背景图片. 3:控制状态栏的样式:1:[UIApplication sharedApplica

iOS-Senior11-即时通信2(登录注册界面)

1.引入文件 1.1步骤 1.2步骤 1.3步骤 1.1用storyboard布局 登录界面两个textField,两个button,输入用户名和密码,点击登录,链接服务器成功,并认证成功,点击注册,跳到注册界面,输入用户名,密码,点击注册,链接服务器成功,认证成功,并模态退回登录界面(当注册过的用户名和密码,再次注册时会打印出错误) 2.创建loginViewController //延展方法 @interface LoginViewController () //用户名的输入框 @prope

C#_连接数据库实现 登录注册界面

//编写登录界面逻辑 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using System.Data.SqlClie

vue koa2 mongodb 从零开始做个人博客(二) 登录注册功能后端部分

0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.后端搭建 1.1项目结构 首先看一下后端的server目录 挨个解释一下 首先dbs文件夹顾名思义,操作数据库的,modules就是操作数据库的mongoose模型. config.js是为了方便修改数据库数据. interface就是接口文件夹,utils就是工具的意思呗,接口需要用到的axios和账号集权的passport都在这里修改(passport是啥待会儿再细说). 和utils同级的就是users.js

Android实战简易教程-第三十二枪(自定义View登录注册界面EditText-实现一键清空)

自定义View实现登录注册页面的EditText一键清空功能,效果如下: 输入框输入文字后自动出现一键清空键,输入框文字为空时,一键清空键隐藏,下面我们看一下如何通过自定义View实现这一效果. 看一下DeletableEditText.java: package com.example.testview; import android.content.Context; import android.graphics.drawable.Drawable; import android.text.