一个有下雨效果的注册界面(html+css+原生javascript)

这是一个缝合了多种效果的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,新手有很多都会忘记导致bugrain.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地址进行进一步的观看和下载使用

一个有下雨效果的注册界面(html+css+原生javascript)相关推荐

使用Java编写一个简单的 JFrame登陆注册界面（一）
使用Java awt 及 Swing 组件编写一个简单的JFrame登陆注册界面. 示例: 下面开始介绍如何编写. 通过调用实例化一个JFrame框架,在框架内嵌入JPanel,在JPanel上进行添 ...
一个好看美观的登录注册界面的实现
序言:之前介绍那个博客,然后自己搞了这个界面.最近有人和我要,把代码给大家贴出来,提供参考. 首先是这个界面哈 <!DOCTYPE html> <html lang="en ...
个人简历管理系统（3）- 登陆与注册界面
个人简历管理系统- 登陆与注册界面 HTML + CSS + JAvascript login.jsp register.jsp link.html web.xml 备注 HTML + CSS + J ...
春天，陪你一起去赏雨——HTML5下雨效果
不知从什么时候我们已经没有了淋雨的勇气.不知从什么时候我们已经不敢享受雨水的甘甜.不知从什么时候我们感受不到那雨声的清脆.桃花已开但我们却嗅不到他的清香.春雨已来但我们却想方设法将其遮挡.湖水已涨但我 ...
29.1 CSS介绍、3种使用方式、9种选择器、常用属性、实现注册界面
目录 1 CSS:页面美化和布局控制 2 Css使用方式 2.1 内联样式使用 2.2 内部样式使用 2.3 外部样式使用 3 Css选择器 3.1 基础选择器 3.2 选择器扩展 4 常用属性 5 ...
用Axure创建一个知乎登录注册界面
百度网盘资源:https://pan.baidu.com/s/1EIujIll2_xfAqvrpy8upzA 提取码:pukh 首页效果是这样的: 对于图片的部分需要插入占位符,其他的都是一些简单的基 ...
html+css+javaScript实现一个简单的注册界面
html+css+javaScript实现一个简单的注册界面自学html,css,js也有一小段时间了,尝试着做点东西来巩固一下,就决定实现这个简单的注册界面.实现的注册界面很普通,没有加上华丽的装 ...
连接数据库，写了一个登录注册界面
//首先将连接数据库的语句抽出,作为一个工具类,使用的时候直接可以进行调用 package com.kd.clqx.util;import java.sql.Connection; import ja ...
基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...