HTML+CSS+JS 实现登录注册界面[通俗易懂]

您所在的位置：网站首页 › 登录页面的代码在html中 › HTML+CSS+JS 实现登录注册界面[通俗易懂]

HTML+CSS+JS 实现登录注册界面[通俗易懂]

2024-07-08 04:54| 来源: 网络整理| 查看: 265

大家好，又见面了，我是你们的朋友全栈君。

文章目录

案例一滑动样式案例二滑动样式案例三动态样式案例四普通样式案例五滑动样式案例六普通样式具体怎么获取呢？案例一滑动样式

代码语言：javascript复制 Login Sign Up Username Password True Name Submit Or, Sign In Sign In Username Password Sign In Or, Sign Up

main.js

代码语言：javascript复制var toggleBtns = document.querySelectorAll('.js-formToggle'); for(var i = 0; i < toggleBtns.length; i++){ toggleBtns[i].addEventListener("click",toggleForm); } var firstClick = true; function toggleForm(){ if(!firstClick){ document.querySelector('.js-imageAnimate').classList.toggle("animate"); document.querySelector('.js-imageAnimate').classList.toggle("animateOut"); document.querySelector('.js-panel_content').classList.toggle("animate"); document.querySelector('.js-panel_content').classList.toggle("animateOut"); } else{ firstClick = false; document.querySelector('.js-imageAnimate').classList.add("animate"); document.querySelector('.js-panel_content').classList.add("animate"); } }

背景图：

HTML+CSS+JS 实现登录注册界面[通俗易懂]

default.css

代码语言：javascript复制body, html{ font-family: Ariel, sans-serif; width:100%; height:100%; margin:0; padding:0; display:inline-block; } .page{ display:flex; flex-flow:row; flex-wrap:nowrap; align-items:center; justify-content:center; width:100%; height:100%; background-color: #0f95b0; } .panel{ display:inline-block; position:relative; } .panel_visible{ position:relative; overflow: hidden; } .panel_title{ margin-top: .5em; margin-bottom: 1.2em; } .panel_content{ padding: 20px; background-color: white; z-index:10; position:relative; } .panel_content-overlay{ position:absolute; top:0; left:100%; height:100%; } .panel_content.animate{ animation: movePanel 2s forwards ; } @keyframes movePanel{ 0%, 30%{ transform: translateX(0%); } 35%, 100%{ transform: translateX(-100%); } } .panel_content.animateOut{ animation: movePanelOut 2s forwards ; } @keyframes movePanelOut{ 0%, 30%{ transform: translateX(-100%); } 35%, 100%{ transform: translateX(0%); } } .panel_back{ position:absolute; z-index:0; top:50%; left: 0; width:110%; transform: translate(70%,-50%); } .panel_back.animate{ animation: move 2s forwards ; } @keyframes move{ 0%{ transform: translate(70%,-50%); z-index:0; } 15%{ transform: translate(140%,-50%); z-index:10; } 75%{ transform: translate(-120%,-50%); z-index:10; } 100%{ transform: translate(-50%,-50%); z-index:0; } } .panel_back.animateOut{ transform: translate(-50%,-50%); animation: moveOut 2s forwards ; } @keyframes moveOut{ 0%{ transform: translate(-50%,-50%); z-index:0; } 15%{ transform: translate(-120%,-50%); z-index:10; } 75%{ transform: translate(140%,-50%); z-index:10; } 100%{ transform: translate(70%,-50%); z-index:0; } } .panel_img{ width:100%; display:block; } /* Form */ .form{ box-sizing:border-box; } .form_label{ display:block; color: #3D3D3D; font-weight: 600; margin-bottom: 5px; } .form_input{ border-radius: 3px; background-color: #f2f2f2 ; box-shadow: 0px 2px 2px #D6D6D6; border:none; padding: 2%; margin-bottom: 15px; width: 250px; box-sizing:border-box; position:relative; } .form_input:focus{ box-shadow: none; outline-color: #0f95b0; } .form_input::after{ /* TODO: make this after portion work */ content: "👁️"; position:absolute; top: 0; left: 0; height: 50px; width: 50px; background-color: red; } .form_btn{ margin-top: 1.2em; margin-bottom: 2em; display:block; width:100%; background-color: #0f95b0; color: white; border:none; padding: .6em; text-transform: uppercase; font-weight: 500; font-size: 1.1em; border-radius: 3px; cursor: pointer; } .form_toggle{ background-color: transparent; border: none; padding: 0; margin:0; font-size: 1.1em; box-sizing: border-box; border-bottom: 1px solid transparent; cursor: pointer; } .form_toggle:hover{ border-bottom: 1px solid #0f95b0; } .form_toggle:focus{ outline: none; border-bottom: 1px solid #0f95b0; }

效果图：

在这里插入图片描述

在这里插入图片描述案例二滑动样式

style.css

代码语言：javascript复制*{ padding: 0; margin:0; box-sizing: border-box; font-family: 'Poppins',sans-serif; } /* 设置整个表单参数 (父盒子)*/ section { position: relative; min-height: 100vh; background: lightblue; display: flex; justify-content: center; align-items: center; padding: 20px; } section .container { position: relative; width: 800px; height: 500px; background: #fff; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1); overflow: hidden; } section .container .user{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; } /* 更改图片（左侧）*/ section .container .imgBx{ position: relative; width: 50%; height: 100%; /* background: #fff; */ transition: .5s; } section .container .user .imgBx img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* 右侧表单盒子 */ section .container .user .formBx { position: relative; width: 50%; height: 100%; background: #fff; display: flex; justify-content: center; align-items: center; padding: 40px; transition: .5s; } /* h2 */ section .container .user .formBx form h2{ font-size: 18px; font-weight: 600; text-transform: uppercase;/*大小*/ letter-spacing: 2px;/* 间距*/ text-align: center; width: 100%; margin-bottom: 10px; color: #555; } /* 表单文字属性 */ section .container .user .formBx form input{ position: relative; width: 100%; padding: 10px; background: #f5f5f5; color: #333; border: none; outline:none; box-shadow:none; margin: 8px 0; font-size: 14px; letter-spacing:1px; font-weight: 300; } /* 为登录设置样式 */ section .container .user .formBx form input[type="submit"]{ max-width: 100px; background: #677eff; color:#fff; cursor:pointer; font-size: 14px; font-weight: 500; letter-spacing: 1px; transition: .5s; } /* 没有账号时 */ section .container .user .formBx form .signup{ position: relative; margin-top: 20px; font-size: 12px; letter-spacing: 1px; color: #555; text-transform: uppercase; font-weight: 300; } section .container .user .formBx form .signup a{ font-weight: 600; text-decoration: none; color: #677eff; } section .container .singupBx { pointer-events: none; } section .container.active .singupBx { pointer-events: initial; } section .container .singupBx .formBx { left: 100%; } section .container.active .singupBx .formBx { left: 0; } section .container .singupBx .imgBx { left: -100%; } section .container.active .singupBx .imgBx { left: 0; } section .container .singinBx .formBx { left: 0; } section .container.active .singinBx .formBx { left: 100%; } section .container .singinBx .imgBx { left: 0; } section .container.active .singinBx .imgBx { left: 100%; } @media (max-width: 991px) { section .container { max-width: 400px; } section .container .imgBx { display: none; } section .container .user .formBx { width: none; } }

First.html

代码语言：javascript复制登录

登录注册

function topggleForm(){ var container = document.querySelector('.container'); container.classList.toggle('active'); }

img图片： favicon.ico

在这里插入图片描述

1.jpg

在这里插入图片描述

2.jpg

在这里插入图片描述

效果图：

在这里插入图片描述

在这里插入图片描述案例三动态样式

index.html

代码语言：javascript复制 Document

登陆 / 注册邮箱用户名密码重复密码用户名密码忘记? 登陆 var vue = new Vue({ el: '#app', data: { active: 'login' }, methods: { go (type) { this.active = type } }, beforeMount () { } })

style.css

代码语言：javascript复制* { margin: 0; padding: 0; } body { height: 100vh; display: flex; justify-content: center; align-items: center; font-family: miaowu; background: linear-gradient(45deg, rgb(80, 150, 250), rgb(245, 189, 253)) fixed; } .container { position: relative; width: 70rem; } .container img { width: 70rem; } .switch span { color: #ccc; font-size: 1.4rem; cursor: pointer; } .switch span.active { color: rgb(181, 154, 254); } .panel { width: 30%; margin: 10rem 0 0; position: absolute; right: 0; top: 0; display: flex; justify-content: center; } .form { width: 12rem; margin: 3rem 0 0; } .form .input { position: relative; opacity: 1; height: 2rem; width: 100%; margin: 2rem 0; transition: .4s; } .input input { outline: none; width: 100%; border: none; border-bottom: .1rem solid rgb(181, 154, 254); position: relative; line-height: 35px; background: transparent; z-index: 1; } .input label { position: absolute; left: 0; top: 20%; font-size: 1.2rem; color: rgb(129, 101, 207); transition: .3s; } .input input:focus ~ label { top: -50%; font-size: .9rem; } .form span { display: block; color: rgb(110, 89, 167); font-size: .8rem; cursor: pointer; } .form button { border: none; outline: none; margin: 2.5rem 0 0; width: 100%; height: 3rem; border-radius: 3rem; background: linear-gradient(90deg, rgb(181, 154, 254), rgb(245, 189, 253)); box-shadow: 0 0 8px rgb(181, 154, 254); cursor: pointer; color: white; font-family: miaowu; } #live2dcanvas { border: 0 !important; }

背景图：

在这里插入图片描述

效果图：

在这里插入图片描述

在这里插入图片描述案例四普通样式代码语言：javascript复制 login body { /* 设置边距，可以设置四个方向，分别是上右下左 */ margin: 0; /* 填充也是可以设置四个方向，同上 */ padding: 0; /* 设置字体风格 */ font-family: sans-serif; /* 设置背景颜色 */ background: lightsteelblue; } .box { width: 300px; padding: 40px; /* 绝对定位，通过这个可以使元素放在页面的任何一个位置上 */ position: absolute; /* 以下三行代码实现了块元素在百分比下居中可以参考： https://www.cnblogs.com/knuzy/p/9993181.html */ top: 50%; left: 50%; transform: translate(-50% , -50%); /* 设置登陆界面的背景颜色 */ background-color: cornflowerblue; /* 规定标签中元素属性为 text 的居中 */ text-align: center; } .box h1 { color: #349; /* 控制文本大小写 */ text-transform: uppercase; font-size: 500; } /* 选中输入账号密码的框框 */ .box input[type="text"], .box input[type="password"] { border: 0; background: none; display: block; /* 第一个参数定上下 20px 第二个auto自动适配 */ margin: 20px auto; /* 文本居中 */ text-align: center; /* 设置边框大小和颜色 */ border: 2px solid #3498db; /* 两个参数分别对应高和宽 */ padding: 14px 10px; /* 设置边框为宽 */ width: 200px; /* 边框对应的属性分别有三个 https://www.w3school.com.cn/cssref/pr_outline.asp */ outline: none; color: white; /* 边框的半径更圆润*/ border-radius: 24px; /* 设置动画的过渡时间 */ transition: 0.25s; } /* 设置变化后的界面 */ .box input[type="text"]:focus, .box input[type="password"]:focus { width: 280px; border-color: #2ecc71; } .box input[type="submit"] { border: 0; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #2ecc71; padding: 14px 40px; outline: none; color: black; border-radius: 24px; transition: 0.25s; } .box input[type="submit"]:hover { background: #2ecc71; } codestep

效果图：

在这里插入图片描述案例五滑动样式代码语言：javascript复制 Login * { font-family: 'montserrat', sans-serif; } body { margin: 0; padding: 0; background: #333; } .login-box { position: absolute; top: 0; left: -100%; width: 100%; height: 100vh; /* vh 视口高度 viewport height 百分比单位*/ background-image: linear-gradient( 45deg, #9fbaa8, #31354c ); /*设置颜色渐变方向(0deg垂直向上) 起点颜色终点颜色*/ transition: 0.4s; /*过度效果 property duration timing-function delay 默认属性:all 0 ease 0*/ } .login-form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*定义 2D 转换8 */ color: white; text-align: center; } .login-form h1 { font-weight: 400; margin-top: 0; } .txtb { display: block; box-sizing: border-box; width: 240px; background: #ffffff28; border: 1px solid white; padding: 10px 20px; color: white; outline: none; margin: 10px 0; border-radius: 6px; text-align: center; } .login-btn { width: 240px; background: #2c3e50; border: 0; color: white; padding: 10px; border-radius: 6px; cursor: pointer; } .hide-login-btn { color: #000; position: absolute; top: 40px; right: 40px; cursor: pointer; font-size: 30px; opacity: 0.7; transform: rotate(45deg); /*定义 2D 转换8 */ } .show-login-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; border: 2px solid; padding: 10px; cursor: pointer; } .showed { left: 0; } -> Show Login Form + Welcome function hasClass(element, clssname) { return element.className.match(new RegExp('(\\s|^)' + clssname + '(\\s|$)')) } function addClass(element, clssname) { if (!this.hasClass(element, clssname)) element.className += ' ' + clssname } function removeClass(element, clssname) { if (hasClass(element, clssname)) { var reg = new RegExp('(\\s|^)' + clssname + '(\\s|$)') element.className = element.className.replace(reg, ' ') } } function toggleClass(element, clssname) { if (hasClass(element, clssname)) { removeClass(element, clssname) } else { addClass(element, clssname) } } var loginBox = document.getElementsByClassName('login-box') var showBtn = document.getElementsByClassName('show-login-btn') var hideBtn = document.getElementsByClassName('hide-login-btn') showBtn[0].addEventListener('click', function() { toggleClass(loginBox[0], 'showed') }) hideBtn[0].addEventListener('click', function() { toggleClass(loginBox[0], 'showed') })

效果图：

在这里插入图片描述

在这里插入图片描述案例六普通样式

代码语言：javascript复制登录界面 LOGIN

style.css

代码语言：javascript复制body { margin: 0; padding: 0; background-image: url(../img/bglogin.png); /* 背景图片 */ background-repeat: no-repeat; /* 背景图片不重复 */ } #bigBox { margin: 0 auto; /* login框剧中 */ margin-top: 200px; /* login框与顶部的距离 */ padding: 20px 50px; /* login框内部的距离(内部与输入框和按钮的距离) */ background-color: #00000090; /* login框背景颜色和透明度 */ width: 400px; height: 300px; border-radius: 10px; /* 圆角边 */ text-align: center; /* 框内所有内容剧中 */ } #bigBox h1 { color: white; /* LOGIN字体颜色 */ } #bigBox .inputBox { margin-top: 50px; /* 输入框顶部与LOGIN标题的间距 */ } #bigBox .inputBox .inputText { margin-top: 20px; /* 输入框之间的距离 */ } #bigBox .inputBox .inputText span { color: white; /* icon颜色 */ } #bigBox .inputBox .inputText input { border: 0; /* 删除输入框边框 */ padding: 10px 10px; /* 输入框内的间距 */ border-bottom: 1px solid white; /* 输入框白色下划线 */ background-color: #00000000; /* 输入框透明 */ color: white; /* 输入字体的颜色 */ } #bigBox .loginButton { margin-top: 30px; /* 按钮顶部与输入框的距离 */ width: 150px; height: 25px; color: white; /* 按钮字体颜色 */ border: 0; /* 删除按钮边框 */ border-radius: 20px; /* 按钮圆角边 */ background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); /* 按钮颜色 */ }

iconfont.css

代码语言：javascript复制@font-face { font-family: "iconfont"; src: url('iconfont.eot?t=1591106386397'); /* IE9 */ src: url('iconfont.eot?t=1591106386397#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;base64,d09GMgABAAAAAAPkAAsAAAAACCgAAAOVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEDIM4ATYCJAMMCwgABCAFhG0HPBsEB1GUDUqS7IckiWBsgSKJ5iIQA3MI4geKAwAAlgIQD19j7f3dvUMtQRJNHn26aJJEYoiEToIQxUIheSdEpnsms/x+7VRC3R1ElWSaNOmT7YvvDbzSSY3SaIQIoTG0rs5YPKzkCKMdmFhnZl8Ihekb28ETv33fz7o4nDbF5zc4pzmmRl2AcUABjb0swQJKkHuIV7u0w15PoF6fKeXl/dOLUktBuwXiMPBUqZVSKTXZoVaolowt4kxdbTpJfpz6349fEyEhqWS078rBni1tfpx/3fAd/w7XLgJ7PAP4SWSMKynEbqlpRzUMjauqV0W1+uSqIqSxvP//+CxNUDX/8EiCqKKZjWCYCNNJsW1WLL5Bzlmzb65zFXW4U/ImqTtRmqq8rTVL84YCiXK964MkBwBChhC37GSmaAaSZCIxivE4l2FIEkKCE4+PJJNjXMSMJhepAICiEKKrGWaMhIBoAYhLZOh2Bu7SzZGtAqIe0SYcGUlQiUgCUTVo/TnJjVvc95HI5Yi3TFFIQg4HkA28Mz+KSzM0xiMcdSST3vj0UzjDecQXy46LKNurEblFc0L3gGbB7yd2/6rYfSSsEoO2lVGueUc76Qd5FBr4XjBRXGr52LLO3SgfmellnsiUfeLOjkZD4cMQHi4vxEFvmweWxo5OZvix0VJYMQTybB2X8TbsGqooxPqHm3j4sdDQ2N6Fh17hMYUVnLuDgqKukpbs4WGWHRlWt5QUdhL9OpNfZny4NlGbb7prFux5BkrDntnR4Yvm72lYnjz7vL23GnzeXB3LWuqPt09ct8c9GsyblVq+Zb7y8lN/4+H2amVv2PFX2y3g/ef9DBVFu3RqJVqzfyG7ZUnRuFSdi8KyWYY7O/KbDAlkCDr/xNbur7+lSyk2hFqBjZDU6IWsVj+yYMehosEUVNWag3pjDiY36MCqotRh1AdAaPUFSbNXyFr9IAv2Fyq6/UNVa/Ch3lbo52wwGJudLkYlaEG/QGCylCytdILsM/QeYsVJro+7QnaBF+Zn5rLRA0yRxxjgHr0FEQLiLIF92AzjOIOcsxCNzPgi+cbsLJW9aMZkSaljCUOKQBbQXoCAkUmRW1l0cp8/gzwPYgrXFFXpryDmBLWDeTPmWiAPRGmromu5xHnkWSAEAYRlEmAfDCg2QxmQl7cKIUPM8HsEchtmSTlqK5qZX5I83yqoR4/JkSJHUXMcuEDH2NoLTJSqBEslAAAA') format('woff2'), url('iconfont.woff?t=1591106386397') format('woff'), url('iconfont.ttf?t=1591106386397') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1591106386397#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-visible:before { content: "\e6a2"; } .icon-nickname:before { content: "\e6a0"; }

效果图：

在这里插入图片描述具体怎么获取呢？

鉴于小伙伴们没有csdn积分，我把代码压缩成了一个压缩包，放在了gitee上面，需要的请点击下载点击下载

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/162713.html原文链接：https://javaforall.cn

【本文地址】

公司简介

联系我们