HTML5+CSS3+JavaScript 渐变轮播图登录页面
Posted Acx7
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5+CSS3+JavaScript 渐变轮播图登录页面相关的知识，希望对你有一定的参考价值。
前言
一个使用 html5+CSS3+javascript 编写的登录页面，包含 logo、轮播图、正则表达式、CSS3渐变…的登录界面。
预览
项目结构
项目源码
笔者提供项目源码，建议通过 github 或 gitee 获取，别忘了 start 一下哦，也可通过本页面获取，开源不易，点个赞吧。
https://gitee.com/acx7/login-page
https://github.com/Acx7/login-page
1.图片资源
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
<link rel="stylesheet" href="login.css">
<script src="login.js"></script>
</head>
<body>
<section>
<!-- 背景颜色 -->
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<img id="logo" src="logo.png" alt="logo">
<!-- 轮播图 -->
<div class="box">
<div class="container">
<img id="pic0" src="0.png" alt="">
<img id="pic1" src="1.png" alt="" hidden>
<img id="pic2" src="2.png" alt="" hidden>
<img id="pic3" src="3.png" alt="" hidden>
<img id="pic4" src="4.png" alt="" hidden>
<script>
let index = 0;
let pic = document.getElementById("pic"+index);
setInterval(function()
pic.setAttribute("hidden","true");
index++;
pic = document.getElementById("pic"+index);
pic.removeAttribute("hidden");
if (index === 4)
index = 0;
,3000);
</script>
</div>
</div>
<!-- 登录框 -->
<div class="box">
<div class="container">
<div class="form">
<h2 onclick="f1()">密码登录 </h2>
<h2 onclick="f2()">手机登录</h2>
<form method="get" action="">
<div class="inputBox">
<label>
<input type="text" id="username" name="username" placeholder="用户名" autocomplete="off" maxlength="20">
</label>
</div>
<div class="inputBox">
<label>
<input type="text" id="phoneNumber" name="phoneNumber" autocomplete="off" placeholder="手机号" maxlength="11" hidden>
</label>
</div>
<div class="inputBox">
<label>
<input type="text" id="code" name="code" autocomplete="off" placeholder="验证码" maxlength="6" hidden>
</label>
</div>
<div class="inputBox">
<label>
<input type="password" id="password" name="password" autocomplete="off" placeholder="密码" maxlength="20">
</label>
</div>
<div class="inputBox">
<label>
<input type="password" id="newPassword" name="newPassword" autocomplete="off" placeholder="新密码" maxlength="20" hidden>
</label>
</div>
<div class="inputBox" style="text-align:center">
<input id="login" type="submit" value="登录" name="login" onclick="checkLogin()">
<input id="login2" type="submit" value="登录" name="login2" onclick="checkLogin2()" hidden>
<input id="register" type="submit" value="注册用户" name="register" onclick="checkReg()" hidden>
<input id="modify" type="submit" value="修改密码" name="modify" onclick="checkMod()" hidden>
<input id="reset" type="submit" value="重置密码" name="reset" onclick="checkRe()" hidden>
<input id="send" type="submit" value="发送验证码" name="send" onclick="checkSend();" hidden>
</div>
</form>
<p class="forget"><a href="javascript:void(0)" onclick="f3()">注册账号 </a>
<a href="javascript:void(0)" onclick="f4()">修改密码 </a>
<a href="javascript:void(0)" onclick="f5()">忘记密码</a></p>
</div>
</div>
</div>
</section>
</body>
</html>
login.css
/* 清除浏览器默认边距*/
*
margin: 0;
padding: 0;
box-sizing: border-box;
/* 使用flex布局，让内容垂直和水平居中 */
section
/* 相对定位 */
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
/* 背景颜色 */
section .color
/* 绝对定位 */
position: absolute;
/* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
filter: blur(200px);
/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
section .color:nth-child(1)
top: -350px;
width: 600px;
height: 600px;
background: #ff359b;
section .color:nth-child(2)
bottom: -150px;
left: 100px;
width: 500px;
height: 500px;
background: #fffd87;
section .color:nth-child(3)
bottom: 50px;
right: 100px;
width: 500px;
height: 500px;
background: #00d2ff;
.box
position: relative;
/* 登录框样式 */
.container
position: relative;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
#logo
position:fixed;
top:10px;
left:10px;
.form
position: relative;
width: 100%;
height: 100%;
padding: 50px;
/* 登录标题样式 */
.form h2
position: relative;
color: #fff;
font-size: 18px;
font-weight: 600;
letter-spacing: 5px;
margin-bottom: 0;
cursor: pointer;
display: inline-block;
text-decoration: none;
/* 登录标题的下划线样式 */
.form h2::before
content: "";
position: absolute;
left: 0;
bottom: -7px;
width: 0;
height: 3px;
background: #fff;
transition: 0.5s;
.form h2:hover:before
width: 88px;
.form .inputBox
width: 100%;
margin-top: 20px;
/* 输入框样式 */
.form .inputBox input
width: 100%;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.2);
outline: none;
border: none;
border-radius: 30px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 16px;
letter-spacing: 1px;
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
.form .inputBox input::placeholder
color: #fff;
/* 登录按钮样式 */
.form .inputBox input[type="submit"]
background: #fff;
color: #666;
max-width: 120px;
margin-bottom: 20px;
margin-right: 18px;
margin-left: 8px疯狂HTML5+CSS3+JavaScript讲义(第2版)