快速制作美观的登录/注册界面

Yichend
427 阅读4分钟

效果图

GIF 2021-12-14 21-31-31.gif

GIF 2021-12-14 21-28-15.gif

实现步骤

在页面开发中，动画效果属于是实现起来相对较复杂的一种，因此我选择套用别人已有的模板，这里先介绍几个网站：

unDraw

unDraw 跳转
这是一个插图网站，里面有许多好看的插图可以使用：

2021.12.14-1.png

CodeMyUI

CodeMyUI 跳转
这是一个 CSS 动效网站，表单、按钮、输入栏等动效都有，且可以在页面里动态更改样式来实现你自己想要的效果：

2.png

3.png

代码实现

html

首先在 html 文件的 <head> 中引入样板用到的样式文件（可以在上一张图左下角查看），

<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>REGISTER</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
    <link rel="stylesheet" href="./styleshteet/register.css">
</head>

之后在引用的样板外面套一层或多层<div>方便调整位置:

<body>
    <!-- 左边的插图 -->
    <div class="formImg"></div>
    
    <div class="htmlBox">
        <div class="registerImg"></div>
        <div class="registerBox">
            <!-- 以下为表单模板 -->
            <form action="./index.html" class="myForm">
                <h1>注册</h1>
                <div class="form-control">
                    <input type="text" required name="username" id="username" />
                    <label>username</label>
                </div>

                <div class="form-control">
                    <input type="email" required name="Email" id="Email" />
                    <label>Email</label>
                </div>

                <div class="form-control">
                    <input type="password" required name="password1" id="password1" />
                    <label>Password</label>
                </div>

                <div class="form-control">
                    <input type="password" required name="password2" id="password2" />
                    <label>Password again</label>
                </div>
                <!-- 以上为表单模板 -->
                <!-- 以下为按钮模板 -->
                <div class="btnArea">
                    <div class="whiteBtn">
                        <a href="./login.html" class="button fast white">登录</a>
                    </div>
                    <div class="buleBtn">
                        <a href="#" class="button" id="registerBtn" onclick="click()">注册</a>
                    </div>
                </div>
                <!-- 以上为按钮模板 -->
            </form>
        </div>
    </div>

    <script src="./js/register.js"></script>
</body>

不要更改class，更改文字内容，以及通过观察发现

                <div class="form-control">
                    <input type="text" required name="username" id="username" />
                    <label>username</label>
                </div>

这一块为一个填写区域（用户名），可以复制来增加填写的内容例如邮箱、手机号等。

CSS

同样复制模板中的 CSS 样式到本地

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* 登录组件 */
body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #E4ECFA;
}

.form-control {
  position: relative;
  margin: 20px 0;
  width: 300px;
}

.form-control input {
  border: 0;
  border-bottom: 2px solid #333;
  padding: 15px 0;
  display: block;
  font-size: 18px;
  font-family: 'Muli', sans-serif;
  width: 100%;
  transition: 0.1s ease-in;
  background-color: #E4ECFA;
}

.form-control input:focus,
.form-control input:valid {
  border-bottom-color: purple;
  outline: none;
}

.form-control input:focus+label span,
.form-control input:valid+label span {
  color: purple;
  transform: translateY(-30px);
}

.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
}

.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ----------------------登录组件----------------------------- */

/* 按钮组件 */
.button.dark {
  --background: #2F3545;
  --shadow: 0 2px 8px -1px rgba(21, 25, 36, 0.32);
  --shadow-hover: 0 4px 20px -2px rgba(21, 25, 36, 0.5);
}

.button.white {
  --background: #fff;
  --text: #275efe;
  --shadow: 0 2px 8px -1px rgba(18, 22, 33, 0.04);
  --shadow-hover: 0 4px 20px -2px rgba(18, 22, 33, 0.12);
}

.button.fast {
  --duration: .32s;
}

.button {
  --background: #275efe;
  --text: #fff;
  --font-size: 16px;
  --duration: .44s;
  --move-hover: -4px;
  --shadow: 0 2px 8px -1px rgba(39, 94, 254, 0.32);
  --shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, 0.5);
  --font-shadow: var(--font-size);
  padding: 16px 32px;
  font-family: "Roboto";
  font-weight: 500;
  line-height: var(--font-size);
  border-radius: 24px;
  display: block;
  outline: none;
  text-decoration: none;
  font-size: var(--font-size);
  letter-spacing: 0.5px;
  background: var(--background);
  color: var(--text);
  box-shadow: var(--shadow);
  transform: translateY(var(--y)) translateZ(0);
  transition: transform var(--duration) ease, box-shadow var(--duration) ease;
}

.button div {
  display: flex;
  overflow: hidden;
  padding: 0 auto;
  text-shadow: 0 var(--font-shadow) 0 var(--text);
}

.button div span {
  display: block;
  backface-visibility: hidden;
  font-style: normal;
  transition: transform var(--duration) ease;
  transform: translateY(var(--m)) translateZ(0);
}

.button div span:nth-child(1) {
  transition-delay: 0.05s;
}

.button div span:nth-child(2) {
  transition-delay: 0.1s;
}

.button div span:nth-child(3) {
  transition-delay: 0.15s;
}

.button div span:nth-child(4) {
  transition-delay: 0.2s;
}

.button div span:nth-child(5) {
  transition-delay: 0.25s;
}

.button div span:nth-child(6) {
  transition-delay: 0.3s;
}

.button div span:nth-child(7) {
  transition-delay: 0.35s;
}

.button div span:nth-child(8) {
  transition-delay: 0.4s;
}

.button div span:nth-child(9) {
  transition-delay: 0.45s;
}

.button div span:nth-child(10) {
  transition-delay: 0.5s;
}

.button div span:nth-child(11) {
  transition-delay: 0.55s;
}

.button:hover {
  --y: var(--move-hover);
  --shadow: var(--shadow-hover);
}

.button:hover span {
  --m: calc(var(--font-size) * -1);
}

.button.reverse {
  --font-shadow: calc(var(--font-size) * -1);
}

.button.reverse:hover span {
  --m: calc(var(--font-size));
}

body .button {
  position: relative;
  margin: 0 12px;
  height: 50px;
  width: 100px;
}

/* -----------------------按钮组件----------------------- */


/* 以下为自己填充更改的内容 */
.htmlBox {
  position: absolute;
  margin: 10% 7%;
}

.registerImg {
  background-image: url(../image/register.png);
  height: 400px;
  width: 600px;
  background-size: cover;
  display: flex;
  float: left;
  margin-top: 150px;
}

.registerBox {
  display: flex;
  position: relative;
  /* 水平方向居中*/
  justify-content: center;
  /* 垂直方向居中*/
  align-items: center;
  float: left;
  height: 550px;
  width: 400px;
  margin: 0 30px;
  border-radius: 16px;
  background: #E4ECFA;
  box-shadow: 28px 28px 0px #abb1bc,
      -28px -28px 0px #ffffff;
}

/* 表单 */
.myF {
  height: 400px;
}

/* 表单标题 */
.myF h1 {
  margin-bottom: 30px;
}

/* 表单单元--输入框 */
.myF .form-control{
  margin: 20px 0;

}

/* 左侧图片 */
.formImg {
  position: relative;
  background-image: url(../image/sign_up.png);
  background-size: cover;
  display: flex;
  width: 200px;
  height: 200px;
  right: 30px;
  bottom: 200px;
  /* z-index: 10; */
}

/* 按钮组件区域 */
.btnArea {
  position: absolute;
  width: 400px;
  height: 60px;
}

/* 白色按钮 */
.button.fast.white {
  display: block;
  position: relative;
  width: 100px;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 按钮（蓝色） */
.button {
  display: block;
  position: relative;
  width: 100px;
  top: -20px;
  left: 150px;
  right: 0;
  bottom: 0;
}

通过调节内外边距，定位等调节模板位置。

JavaScript

// 登录组件
const inputs = document.querySelectorAll('.form-control input');
const labels = document.querySelectorAll('.form-control label');

labels.forEach(label => {
  label.innerHTML = label.innerText
    .split('')
    .map((letter, idx) => `<span style="
        transition-delay: ${idx * 50}ms
      ">${letter}</span>`)
    .join('');
});

// 按钮组件
document.querySelectorAll('.button').forEach(button =>
  button.innerHTML = '<div><span>' + button.textContent.trim().split('').join('</span><span>') + '</span></div>');

// ---------------------------------------------------------------------------------

// 获取注册按钮
var RBtn = document.querySelector("#registerBtn");
// 获取用户名
var userName = document.querySelector("#username");
// 获取邮箱
var emal = document.querySelector("#Email");
// 获取密码1
var pw1 = document.querySelector("#password1");
// 获取密码2
var pw2 = document.querySelector("#password2");
// 获取表单
var myF = document.querySelector(".myForm");

// 这里是唤起本地邮箱来提交表单，可用Ajax等替代
myF.method = "POST";
myF.action = "mailto:ivan@qq.com?subject=注册信息"; 

// 为按钮绑定点击事件
RBtn.onclick = function() {
  if(userName.value == '' || userName.value == null){
    alert("请输入用户名!");
  }
  else if(emal.value == '' || emal.value == null){
    alert("请输入邮箱");
  }
  else if(emal.value.indexOf('@') == -1){
    alert("请输入正确的邮箱格式")
  }
  else if(userName.value.length > 7){
    alert("用户名长度超过7");
  }
  else if(pw1.value == '' || pw1.value == null) {
    alert("请输入密码!");
  }
  else if(pw2.value == '' || pw2.value == null) {
    alert("请再次输入密码!");
  }
  else if(pw1.value != pw2.value) {
    alert("两次输入的密码不一致!");
  }
  else {
    // 打开新页面
    window.open("./index.html");
    // 提交表单
    myF.submit();
  }
}

不要忘记在html文件中引入js文件
一般js文件在 body 下部引入，先加载结构再加载 js 操作
以及这里因为课程要求用邮箱提交，所以实现不了在同一页面实现跳转和用邮箱提交表单，只能开新的页面，以后试试用 axios 来实现表单提交。

avatar
文章
阅读
粉丝