好看实用的六个html登录页面
2024-04-28 06:46:04
原文
本人找到了六个html登录页面，感觉还行，也挺好看的。
1.效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}html {height: 100%;}body {height: 100%;}.container {height: 100%;background-image: linear-gradient(to right, #999999, #330867);}.login-wrapper {background-color: bisque;width: 358px;height: 588px;border-radius: 15px;padding: 0 50px;position: relative;left: 50%;top: 50%;transform: translate(-50%,-50%);}.header {font-size: 38px;font-weight: bold;text-align: center;line-height: 200px;}.input-item {display: block;width: 100%;margin-bottom: 20px;border: 0;padding: 10px;border-bottom: 1px solid rgb(128,125,125);font-size: 15px;outline: none;}.input-item::placeholder {text-transform: uppercase;}.btn {text-align: center;padding: 10px;width: 100%;margin-top: 40px;background-image: linear-gradient(to right,#a6c1ee, #fbc2eb);color: #fff;}.msg {text-align: center;line-height: 88px;}a {text-decoration-line: none;color: #abc1ee;}</style>
</head>
<body><div class="container"><div class="login-wrapper"><div class="header">Login</div><div class="form-wrapper"><input type="text" name="username" placeholder="username" class="input-item"><input type="password" name="password" placeholder="password" class="input-item"><div class="btn">Login</div></div><div class="msg">Don't have account?<a href="#">Sign up</a></div></div></div>
</body>
</html>2.效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}html, body {height: 100%;height: 100%;}.login {width: 358px;height: 588px;border-radius: 15px;padding: 0 50px;position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: #282c34;}.header {font-size: 38px;font-weight: bold;text-align: center;line-height: 200px;color: #61dafb;}.container {height: 30px;width: 250px;position: absolute;left: 50%;top: 40%;transform: translate(-50%, -50%);}input {width: 100%;height: 100%;position: relative;outline: none;border: none;box-sizing: border-box;padding-left: 5px;background-color: #282c34;color: #61dafb;caret-color: #61dafb;}input::placeholder {color: #61dafb;}span {position: absolute;content: "";display: block;background-color: #61dafb;transition: transform .1s ease-in-out;}.top,.bottom {left: 0px;right: 0px;height: 2px;}.left,.right {top: 0px;bottom: 0px;width: 2px;transform: scaleY(0);}.top {top: 0px;transform: scaleX(0);transform-origin: left center;transition-delay: .2s;}.left {left: 0px;transform-origin: bottom center;transition-delay: .3s;}.bottom {bottom: 0px;}.right {right: 0px;transform-origin: top center;transition-delay: .1s;}input:focus ~ .right {transform: scaleY(1);transform-origin: bottom center;}input:focus ~ .left {transform: scaleY(1);transform-origin: top center;}input:focus ~ .top {transform: scaleY(1);transform-origin: right center;}.container1 {height: 30px;width: 250px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.btn {position: absolute;left: 50%;top: 54%;transform: translate(-50%, -50%);text-align: center;padding: 5px;width: 52%;margin-top: 40px;background-color: #61dafb;color: #fff;}</style>
</head>
<body><div class="login"><div class="header">登录</div><div class="container"><input type="text" placeholder="请输入用户名"><span class="left"></span><span class="right"></span><span class="top"></span><span class="bottom"></span></div><div class="container1"><input type="password" placeholder="请输入密码"><span class="left"></span><span class="right"></span><span class="top"></span><span class="bottom"></span></div><div class="btn">登录</div></div>
</body>
</html>3.效果图：
源码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;background-size: 100% 130%;}#login_box {width: 20%;height: 400px;background-color: #00000060;margin: auto;margin-top: 10%;text-align: center;border-radius: 10px;padding: 50px 50px;}h2 {color: #ffffff90;margin-top: 5%;}#input-box {margin-top: 5%;}span {color: #fff;}input {border: 0;width: 60%;font-size: 15px;color: #fff;background: transparent;border-bottom: 2px solid #fff;padding: 5px 10px;outline: none;margin-top: 10px;}button {margin-top: 50px;width: 60%;height: 30px;border-radius: 10px;border: 0;color: #fff;text-align: center;line-height: 30px;font-size: 15px;background-image: linear-gradient(to right, #30cfd0, #330867);}#sign_up {margin-top: 45%;margin-left: 60%;}a {color: #b94648;}</style>
</head><body><div id="login_box"><h2>LOGIN</h2><div id="input_box"><input type="text" placeholder="请输入用户名"></div><div class="input_box"><input type="password" placeholder="请输入密码"></div><button>登录</button><br></div>
</body>
</html>4.效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}html {height: 100%;}body {background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));}.login-container {width: 600px;height: 315px;margin: 0 auto;margin-top: 10%;border-radius: 15px;box-shadow: 0 10px 50px 0px rbg(59, 45, 159);background-color: rgb(95, 76, 194);}.left-container {display: inline-block;width: 330px;border-top-left-radius: 15px;border-bottom-left-radius: 15px;padding: 60px;background-image: linear-gradient(to bottom right, rgb(118, 76, 163), rgb(92, 103, 211));}.title {color: #fff;font-size: 18px;font-weight: 200;}.title span {border-bottom: 3px solid rgb(237, 221, 22);}.input-container {padding: 20px 0;}input {border: 0;background: none;outline: none;color: #fff;margin: 20px 0;display: block;width: 100%;padding: 5px 0;transition: .2s;border-bottom: 1px solid rgb(199, 191, 219);}input:hover {border-bottom-color: #fff;}::-webkit-input-placeholder {color: rgb(199, 191, 219);}.message-container {font-size: 14px;transition: .2s;color: rgb(199, 191, 219);cursor: pointer;}.message-container:hover {color: #fff;}.right-container {width: 145px;display: inline-block;height: calc(100% - 120px);vertical-align: top;padding: 60px 0;}.regist-container {text-align: center;color: #fff;font-size: 18px;font-weight: 200;}.regist-container span {border-bottom: 3px solid rgb(237, 221, 22);}.action-container {font-size: 10px;color: #fff;text-align: center;position: relative;top: 200px;}.action-container span {border: 1px solid rgb(237, 221, 22);padding: 10px;display: inline;line-height: 20px;border-radius: 20px;position: absolute;bottom: 10px;left: calc(72px - 20px);transition: .2s;cursor: pointer;}.action-container span:hover {background-color: rgb(237, 221, 22);color: rgb(95, 76, 194);}</style>
</head>
<body><div class="login-container"><div class="left-container"><div class="title"><span>登录</span></div><div class="input-container"><input type="text" name="username" placeholder="用户名"><input type="password" name="password" placeholder="密码"></div><div class="message-container"><span>忘记密码</span></div></div><div class="right-container"><div class="regist-container"><span class="regist">注册</span></div><div class="action-container"><span>提交</span></div></div></div>
</body>
</html>5.效果图：
源码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;}input,button {background: transparent;border: 0;outline: none;}body {height: 100vh;background: linear-gradient(#141e30, #243b55);display: flex;justify-content: center;align-items: center;font-size: 16px;color: #03e9f4;}.loginBox {width: 400px;height: 364px;background-color: #0c1622;margin: 100px auto;border-radius: 10px;box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);padding: 40px;box-sizing: border-box;}h2 {text-align: center;color: aliceblue;margin-bottom: 30px;font-family: 'Courier New', Courier, monospace;}.item {height: 45px;border-bottom: 1px solid #fff;margin-bottom: 40px;position: relative;}.item input {width: 100%;height: 100%;color: #fff;padding-top: 20px;box-sizing: border-box;}.item input:focus+label,.item input:valid+label {top: 0px;font-size: 2px;}.item label {position: absolute;left: 0;top: 12px;transition: all 0.5s linear;}.btn {padding: 10px 20px;margin-top: 30px;color: #03e9f4;position: relative;overflow: hidden;text-transform: uppercase;letter-spacing: 2px;left: 35%;}.btn:hover {border-radius: 5px;color: #fff;background: #03e9f4;box-shadow: 0 0 5px 0 #03e9f4,0 0 25px 0 #03e9f4,0 0 50px 0 #03e9f4,0 0 100px 0 #03e9f4;transition: all 1s linear;}.btn>span {position: absolute;}.btn>span:nth-child(1) {width: 100%;height: 2px;background: -webkit-linear-gradient(left, transparent, #03e9f4);left: -100%;top: 0px;animation: line1 1s linear infinite;}@keyframes line1 {50%,100% {left: 100%;}}.btn>span:nth-child(2) {width: 2px;height: 100%;background: -webkit-linear-gradient(top, transparent, #03e9f4);right: 0px;top: -100%;animation: line2 1s 0.25s linear infinite;}@keyframes line2 {50%,100% {top: 100%;}}.btn>span:nth-child(3) {width: 100%;height: 2px;background: -webkit-linear-gradient(left, #03e9f4, transparent);left: 100%;bottom: 0px;animation: line3 1s 0.75s linear infinite;}@keyframes line3 {50%,100% {left: -100%;}}.btn>span:nth-child(4) {width: 2px;height: 100%;background: -webkit-linear-gradient(top, transparent, #03e9f4);left: 0px;top: 100%;animation: line4 1s 1s linear infinite;}@keyframes line4 {50%,100% {top: -100%;}}</style>
</head><body><div class="loginBox"><h2>login</h2><form action=""><div class="item"><input type="text" required><label for="">userName</label></div><div class="item"><input type="password" required><label for="">password</label></div><button class="btn">submit<span></span><span></span><span></span><span></span></button></form></div>
</body>
</html>6.效果图：
源码：
<!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>好看实用的六个html登录页面相关推荐
- 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用 核心就是用localStorage存.取数据,这 ...
- 直播系统app源码，简洁好看的登录页面
直播系统app源码,简洁好看的登录页面 1.html <!DOCTYPE html> <html lang="en"> <head><me ...
- html好看的登录页面1（十三种风格登录页面源码）
文章目录 1.登录风格效果说明 1.1 背景凹起风登录界面 1.2 弹出风登录界面 1.3 科技时尚风登录界面 1.4 蓝色一夏风登录界面 1.5 模糊背景左右风登录界面 1.6 上中下介绍风登录界面 ...
- 好看的前端登录页面（HTML+CSS）
效果图 代码 HTML <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- php注册登录详解_实例讲解php用户注册与登录页面
这周做了个php的简单实例,算是学了这么久php语法的一次综合应用吧,感觉前面学的东西都不知道怎么用,不看教程还真做不出来.本来想把它写在网页弹出层上的,这样看起来更像是一个用户登录框,但是看了弹出层 ...
- android 登陆界面动画,【Android开发】动画登录页面
心得感悟 这个Demo对我还是比较有难度的,花了好久去理解.因为动画比较有趣,所以想自己改改样式,也有助于自己的理解.这是进入Android开发学习第六天了,每天的学习都是懂了很多,却还有很多不懂,还 ...
- SharePoint2013自定义登录页面
SharePoint默认创建的WebApplication是基于windows的身份验证模式,以弹出窗口方式进行身份输入登录.这种方式可能对于国内的企业用户来说感觉不是很友好.一般而言,我们会把这种登 ...
- Android:基础控件按键文本框输入框制作登录页面
基础控件之Button,TextView,EditText,ImageView Button:按键 TextView:文本框 EditText:输入框 ImageView:图片 那我们新建一个工程研究 ...
- .NET Core实战项目之CMS 第十六章 用户登录及验证码功能实现
前面为了方便我们只是简单实现了基本业务功能的增删改查,但是登录功能还没有实现,而登录又是系统所必须的,得益于 ASP.NET Core的可扩展性因此我们很容易实现我们的登录功能.今天我将带着大家一起来 ...
- Vue + Spring Boot 项目实战（四）：前后端结合测试（登录页面开发）
前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下: ①打通前后端之间的联系,为接下来的开发打下基础 ②登录页面的开发(无数据库情况下) 文章目录 一.后端项目创建 1.1. 项目/ ...
最新文章
- loadrunner 如何做关联
- java 80端口_Java80端口占用异常解决方法
- 程序步骤_小程序平台搭建步骤是什么?
- guice 实例_使用Google Guice消除实例之间的歧义
- 【nyoj - 890】 分东西 （水题 二进制）
- 分治之快速排序以及快速排序为何最快
- 算法----并行算法
- C++容器，迭代器，容器的适配器
- c语言题库及答案(选择题,C语言题库及答案(选择题).doc
- 人脸识别php程序,教你用PHP实现微信小程序人脸识别刷脸登录功能
- Packet Tracer搭建局域网以及实现局域网互通
- 靡不有初，鲜克有终——写在VNote半周岁
- 算法特训营第2周刷题题目
- puzzle（1321）时间旅人
- 完全卸载软件及电脑软件残留
- R语言多重比较示例：Bonferroni校正法和Benjamini Hochberg法
- 栈+模拟（大鱼吃小鱼）
- DedeCMS最新文章、相关文章、推荐文章、热点文章、头条
- visifire笔记
- 软件版本alpha、Beta、RC、GA、DMR等含义