这是一个缝合了多种效果的html注册界面,效果界面如下,这里省略了动图放上了局部图
点击上方的圆圈会展开注册界面,且该界面的加载时会有模糊效果
输入账号密码将会跳转到个人简介界面:该界面在这个博客有详细介绍
后续将会更新对代码的解释
已经加入对index结构代码的详细思路解释
已经加入了对rain部分样式和js代码的解释
已经更新完毕(图片字体资源已上传github)
(如果疑问可以评论区询问,若我看见都会尽量解答)
index代码如下
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
"use strict"
</script>
<link rel="stylesheet" href="login-form.css">
<link rel="stylesheet" href="rain.css">
<style>
/*emmm,这里是去除元素的内外边距,更好的布局*/
* {
margin: 0;
padding: 0;
}
/* 模糊模块css */
.loading-text {
position: absolute;
/*calc是一种计算函数,具体可参考MDN*/
left: calc(50% - 50px);
top: calc(50% - 48px);
font-size: 50px;
color: #fff;
z-index: 2;
}
</style>
</head>
<body>
<!--rainBox来储存雨滴特效-->
<div class="rainBox"></div>
<!--loading-text是来储存加载时不断变化的数值-->
<section class="loading-text">0%</section>
<!--background来储存中间的登录模块,并设置了一个背景图片-->
<div class="background">
<div class="content">
<span><a href="javascript:void(0);" class="close-login" id="closeBtn">关闭</a></span>
<!--这里用from表单来实现,因为后期可能加入与服务器的交互-->
<!--https://blog.csdn.net/yingjiayu12/article/details/125824548,这是联动的个人简介页面-->
<form action="../个人简介/index.html" class="login-form">
<h2>登录</h2>
<input type="text" class="username" placeholder="用户名">
<input type="password" class="password" placeholder="密码">
<button type="submit">登录</button>
</form>
</div>
</div>
<!--雨滴模块的js文件,下面没有贴出,github链接里有-->
<script src="rain.js"></script>
<script src="zhanghao.js"></script>
<script>
// 开启与关闭部分
var flag = 0;
//这里用最新的获取方式来代替getElementById或者getElementByName
//如果没有见过请前往MDN或者百度查看解释
var background = document.querySelector('.background');
var content = document.querySelector('.content');
var close_login = document.querySelector('.close-login');
var login_form = document.querySelector('.login-form');
background.addEventListener('click', function () {
//如果当前是关闭的状态,点击之后就开启
//这里给背景添加事件是用了一个小技巧
//因为我的圆圈元素是用伪元素来定义的,因此使用了冒泡事件等原理,详见css部分
if (flag == 0) {
content.style.display = 'flex';
flag = 1;
}
})
close_login.addEventListener('click', function () {
if (flag == 1) {
event.stopPropagation();
content.style.display = 'none';
flag = 0;
}
})
// 模糊加载模块
var load_text = document.querySelector('.loading-text');
var load = 0; let mouhu_timer = setInterval(blurring, 30);
var mouhu = document.querySelector('.mouhu');
/*下面这个函数则是一种映射函数,因为我本来要实现文字不透明度在变小的同时使背景的模糊值增
加,那么num如果是当前的不透明度值得话,因为不透明度是相对于1来说的,那么此时背景的模糊值如
果设定为从30开始减少,那么此时now的值一个就设定为1,另一个设定为30,这就恰好保证了当前面减
少1个单位,后面减少同等倍数的单位,又因为load此时是没有换算百分数的,因此再除以100*/
function scale(num, now) {
return (-load / 100 * (now) + now);
}
function blurring() {
load++;
if (load > 99) {
clearInterval(mouhu_timer);
}
load_text.innerHTML = load + '%';
load_text.style.opacity = scale(load, 1);
var _blur = scale(load, 30) + 'px';
//下面是一种再函数里使用参数的方法
//注意外部是 ` 的符号,这是和$连用的一种处理字符的方法
//试想一下,若直接使用''则会导致参数变成字符
background.style.filter = `blur(${_blur})`;
}
</script>
<noscript>sorry,你的浏览器不支持javascipt语言</noscript>
</body>
</html>css主体部分部分代码如下
/*字体部分的声明,当然可以自己定义,挑一个自己喜欢就行*/
html, body {
font-family: 'PingFang SC', 'Microsoft Yahei', sans-serif;
}
/*emmm,网上下载的小图标,需要搭配font文件使用(已上传github)*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?tomleg');
src: url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?tomleg') format('truetype'),
url('fonts/icomoon.woff?tomleg') format('woff'),
url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.background {
width: 100vw;
height: 100vh;
background: url(rain.png) fixed no-repeat;
/* 把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。 */
background-size: cover;
/*用flex来快速居中,可能有的小伙伴不知道,emmm,可以学一下,偷懒式的响应式布局*/
display: flex;
/*其中的justify-content:center指将元素水平居中
align-items:center是将元素垂直居中*/
align-items: center;
justify-content: center;
/*此处是为了搭配伪元素添加事件使用,取消父元素的event,给父元素添加事件
就可以巧妙的使伪元素继承事件动作了,一个当时我怎么也不会网上找的小技巧
还有一种取消冒泡的方法,感觉这个比较方便*/
pointer-events: none;
}
.content {
position: relative;
width: 100vw;
height: 100vh;
/* background: url(rain.png) fixed no-repeat; */
/* 把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。 */
/* background-size: cover; */
/*
display: flex;
display: none;
align-items: center;
justify-content: center;
}
/* 关闭框 */
.content span {
position: absolute;
font-size: 16px;
right: calc(50% - 210px);
top: calc(50% - 190px);
background-color:rgba(255, 255, 255, .3);
/* border: #ebebeb solid 1px; */
width: 40px;
height: 40px;
border-radius: 20px;
text-align: center;
line-height: 40px;
z-index: 11;
pointer-events: auto;
}
a {
color: #3d5245;
text-decoration: none;
}
/* 开启框 */
.background::before {
pointer-events: auto;
content: '\e919';
font-family: 'icomoon';
font-size: 60px;
position: absolute;
right: calc(50% - 30px);top: 0;
z-index: 2;
}
.login-form {
pointer-events: auto;
width: 300px;
height: 230px;
display: flex;
flex-direction: column;
padding: 40px;
text-align: center;
position: relative;
z-index: 100;
/* 从父亲哪里来继承背景图片 */
background: inherit;
border-radius: 18px;
overflow: hidden;
}
.login-form::before {
background-color: pink;
content: '';
/* 记住这里又一个大坑,如果使用calc函数且如以下这样使用
切记加号前后要留有空格,不然会有invaild property value的错误 */
width: calc(100% + 20px);
height: calc(100% + 20px);
position: absolute;
top: -10px;
left: -10px;
overflow: hidden;
/*inherit是继承背景的意思,加了这个就会发现元素背景已经是总的背景了!*/
background: inherit;
/*可能有的小伙伴会忘记box-shadow的具体参数(绝对不是说我自己),下面就放上参数参考好了
1.阴影在 x 轴的位置 2.阴影在 y 轴的位置 3.阴影的模糊半径(阴影是否朦胧) 4. 阴影扩展半径
5. insert是指内阴影,默认是外阴影
当然可以自己用浏览器调整啦*/
box-shadow:inset 0 0 0 200px rgba(255,255,255,.25);
filter: blur(5px);
z-index: -1;
}
.login-form h2 {
font-size: 18px;
font-weight: 400;
color: #3d5245;
margin-bottom: 20px;
}
.login-form input,
.login-form button {
margin: 8px 0;
height: 36px;
border: none;
background-color: rgba(255,255,255,.3);
border-radius: 4px;
padding: 0 14px;
color: #3d5245;
outline: none;
}
.login-form input::placeholder {
color: #3d5245;
}
.login-form button {
margin-top: 30px;
background-color: rgba(209,179,0,.4);
color: white;
position: relative;
overflow: hidden;
cursor: pointer;
transition: .4s;
}
/* 绿色滚动动画 */
/* 这里主要是一个登录键鼠标经过时时有绿色滑动的情况,具体的实现方式是点击时用两个错时的伪元素来实现滑动的效果*/
.login-form button:hover {
background-color: rgba(209,179,0,.7);
}
.login-form button::before,
.login-form button::after {
content: '';
display: block;
height: 100%;
background-color: rgba(179,255,210,.5);
opacity: .5;
position: absolute;
top: 0;left: 0;
/*css3 3d动画必备元素*/
/*在这里的具体效果是是一个长方体变成一个斜着的平行四边形*/
transform: skewX(-15deg);
filter: blur(30px);
overflow: hidden;
/*首先是不在页面上展示的,所以直接设置了一个负数来隐藏*/
transform: translateX(-100px);
}
.login-form button:hover::after,
.login-form button:hover::before {
width: 40px;
background-color: rgba(179,255,210,.3);
left: 60px;
opacity: 0;
filter: blur(5px);
}
/*经过时就让两个伪元素进行平移*/
.login-form button:hover::before {
transition: 1s;
transform: translateX(320px);
opacity: .7;
}
.login-form button:hover::after {
transition: 1s;
transform: translateX(320px);
opacity: 1;
}
css rain部分代码如下
/* 下雨部分 */
.rainBox {
/*因为下雨部分主要是通过动态生成很多个不断下落的长方形形状来生成,所以定位要为fixed,从而不干扰
其他元素*/
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
/* 作为背景不阻挡其他元素事件触发 */
pointer-events: none;
z-index: 2;
}
/*这里设置的是rainbox的每一个雨滴的样式*/
.rain {
z-index: 2;
position: absolute;
width: 2px;
height: 50px;
/* 渐变 */
background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .6));
}
/* 下雨部分结束 */rain部分的js代码:
const rainBox = document.querySelector('.rainBox');
let boxHeight = rainBox.offsetHeight;
let boxWidth = rainBox.offsetWidth;
// console.log(boxHeight,boxWidth);
// 窗口大小改变时进行操作,重新获取大小
window.addEventListener('onresize', function () {
boxHeight = rainBox.offsetHeight;
boxWidth = rainBox.offsetWidth;
})
//一个定时器,不断生成雨滴和使雨滴下落和消失
setInterval(function () {
let rain = document.createElement('div');
//是每一个雨滴都添加上rian的样式,因为是后来生成的元素所以刚开始并没有添加样式,需要手动添加
rain.classList.add('rain');
//随机刷新雨点位置,但是上开始高度为0,所以top值为0,left值随机刷新
rain.style.top = 0;
//注意这里不要忘记加上px,新手有很多都会忘记导致bug
rain.style.left = Math.random() * boxWidth + 'px';
//透明度也是随机生成
rain.style.opacity = Math.random();
rainBox.appendChild(rain);
let race = 1;
//这里是判断雨滴是否已经落到屏幕外边,如果是就将其remove掉,合理运用资源
//并且使雨滴不断下落
let timer = setInterval(function () {
if (parseInt(rain.style.top) > boxHeight) {
clearInterval(timer);
rainBox.removeChild(rain);
}
race++;
rain.style.top = parseInt(rain.style.top) + race + 'px';
}, 20)
}, 30);下面是账号验证部分代码
// 存储数据模块
//因为现阶段并没有租服务器,所以暂时用本地储存的方式来模拟账号密码
sessionStorage.setItem('uname', 'yingjiayu');
sessionStorage.setItem('password', 'yingjiayu');
var button = document.querySelector('button');
var username = document.querySelector('.username');
var password = document.querySelector('.password');
//用这个可以阻止form表单的验证
//当然如果你学过AJAX的话会更加清楚明白
login_form.onsubmit = function () {
if (username.value == sessionStorage.getItem('uname') &&
password.value == sessionStorage.getItem('password')) {
// console.log(1);
return true;
}
else {
alert('请检查账号或密码!');
return false;
}
}因为其主体总代码量还是比较庞大的,因此请前往我的github仓库观看源码(本人纯手撸而成)
其他模块(比如字体,图片等)请访问my github地址 进行进一步的观看和下载使用
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
