前端H5动态背景登录页面(下)

news/2024/5/5 18:33:06

最近正好有点儿时间,把之前没整理完的前端动态背景登录页面给整理一下!这是之前的连接前端H5动态背景登录页面(上),这主要是两个登陆页面,一个彩色气泡,一个动态云朵,感兴趣的可以点链接过去看看。
3、深海灯光水母
请添加图片描述
index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<link rel="stylesheet" href="lib/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="css/login.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pure.tooltips.js"></script>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<style>
html,body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
.container{width: 100;height: 100%;margin: 0;padding: 0;background-color: #000000;
}.box { width:450px; height:295px; background:#000000; position:absolute; top:50%; left:50%; margin-left:-14%; margin-top:-10%; z-index:3;opacity: 0.6;}
</style></head>
<body><div id="jsi-jellyfish-container" class="container"><div class="beg-login-box box"><header><h1 style="color:#FFFFFF">欢迎登录</h1></header><div class="beg-login-main"><form action="" class="layui-form" method="post"><input name="__RequestVerificationToken" type="hidden" value="fkfh8D89BFqTdrE2iiSdG_L781RSRtdWOH411poVUWhxzA5MzI8es07g6KPYQh9Log-xf84pIR2RIAEkOokZL3Ee3UKmX0Jc8bW8jOdhqo81" />		<div class="layui-form-item"><label class="beg-login-icon"><i class="layui-icon">&#xe612;</i></label><input type="text" name="userName" lay-verify="userName" autocomplete="off" placeholder="请输入登录名" class="layui-input"></div><div class="layui-form-item"><label class="beg-login-icon"><i class="layui-icon">&#xe642;</i></label><input id="login-password" type="password" name="password" lay-verify="password" autocomplete="off" placeholder="请输入密码" class="layui-input"></div><div class="layui-form-item"><div class="beg-pull-left beg-login-remember" style="color:#FFFFFF;margin-top: 9%;"><label>记住帐号?</label><input type="checkbox" name="rememberMe" lay-skin="switch" lay-text="ON|OFF" checked></div><div class="beg-pull-right"><button class="layui-btn layui-btn-primary" lay-submit lay-filter="login" style="margin-top: 33%;" onclick="login()"><i class="layui-icon">&#xe650;</i> 登录</button></div><div class="beg-clear"></div></div></form></div><footer><!-- <p><a href="../宋加加网页/index.html"><span style="color:#06F">返回首页</span></a></p> --></footer></div><script>
var RENDERER = {JELLYFISH_RATE: 0.00015,DUST_RATE: 0.0005,ADJUST_DISTANCE : 100,ADJUST_OFFSET : 5,init : function(){this.setParameters();this.reconstructMethod();this.createElements();this.bindEvent();this.render();},setParameters : function(){this.$window = $(window);this.$container = $('#jsi-jellyfish-container');this.width = this.$container.width();this.height = this.$container.height();this.radius = Math.sqrt(Math.pow(this.width / 2, 2) + Math.sqrt(this.height/ 2, 2));this.distance = Math.sqrt(Math.pow(this.width, 2) + Math.sqrt(this.height, 2));this.canvas = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0);this.context = this.canvas.getContext('2d');this.jellyfishes = [];this.theta = 0;this.x =  0;this.y =  0;this.destinationX = this.x;this.destinationY = this.y;this.dusts = [];},reconstructMethod : function(){this.render = this.render.bind(this);},getRandomValue : function(range){return range.min + (range.max - range.min) * Math.random();},createElements : function(){for(var i = 0, length = this.JELLYFISH_RATE * this.width * this.height; i < length; i++){this.jellyfishes.push(new JELLYFISH(this));}for(var i = 0, length = this.DUST_RATE * this.width * this.height; i < length; i++){this.dusts.push(new DUST(this));}},bindEvent : function(){this.$container.on('mousemove', this.translateCenter.bind(this, false));this.$container.on('mouseout', this.translateCenter.bind(this, true));},translateCenter : function(toAdjust, event){var offset = this.$container.offset();this.destinationX = event.clientX - offset.left + this.$window.scrollLeft();this.destinationY = event.clientY - offset.top + this.$window.scrollTop();if(!toAdjust){return;}if(this.destinationX < this.ADJUST_OFFSET){this.destinationX = 0;}else if(this.radius > this.width - this.ADJUST_OFFSET){this.destinationX = this.width;}if(this.destinationY < this.ADJUST_OFFSET){this.destinationY = 0;}else if(this.radius > this.height - this.ADJUST_OFFSET){this.destinationY = this.height;}},render : function(){requestAnimationFrame(this.render);if(this.destinationX > this.x){this.x = Math.min(this.x + this.ADJUST_DISTANCE, this.destinationX);}else{this.x = Math.max(this.x - this.ADJUST_DISTANCE, this.destinationX);}if(this.destinationY > this.y){this.y = Math.min(this.y + this.ADJUST_DISTANCE, this.destinationY);}else{this.y = Math.max(this.y - this.ADJUST_DISTANCE, this.destinationY);}var gradient = this.context.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);gradient.addColorStop(0, 'hsl(245, 100%, 50%)');gradient.addColorStop(0.3, 'hsl(245, 100%, 30%)');gradient.addColorStop(1, 'hsl(245, 100%, 10%)');this.context.fillStyle = gradient;this.context.fillRect(0, 0, this.width, this.height);for(var i = 0, length = this.dusts.length; i < length; i++){this.dusts[i].render(this.context, this.x, this.y);}for(var i = 0, length = this.jellyfishes.length; i < length; i++){this.jellyfishes[i].render(this.context, this.x, this.y);}}
};
var JELLYFISH = function(renderer){this.renderer = renderer;this.init(true);
};
JELLYFISH.prototype = {EXPANSION_RANGE : {min : Math.PI / 120, max : Math.PI / 30},DIRECTION_RANGE : {min : 0, max : Math.PI * 2},BASE_RANGE_X : {min : 10, max : 15},BASE_RANGE_Y : {min : 0, max : 5},BASE_RANGE_CP_X : {min : 20, max : 50},BASE_RANGE_CP_Y : {min : -40, max : -20},EXPANTION_OFFSET_RANGE : {min : 0.2, max : 0.5},EXTENSION_RATE_RANGE : {min : 0.5, max : 1.5},FEELER_LENGTH_RANGE : {min : 15, max : 30},FEELER_WIDTH_RANGE : {min : 2, max : 4},ACCELERATION_RATE : 0.2,OFFSET_TO_JUDGE : 100,FRICTION : 0.96,EXTENSION_COUNT : 100,init : function(toInit){this.radius = this.renderer.radius + this.OFFSET_TO_JUDGE * 2;if(toInit){this.x = this.renderer.getRandomValue({min : -this.OFFSET_TO_JUDGE, max : this.renderer.width + this.OFFSET_TO_JUDGE});this.y = this.renderer.getRandomValue({min : -this.OFFSET_TO_JUDGE, max : this.renderer.height + this.OFFSET_TO_JUDGE});this.direction = this.renderer.getRandomValue(this.DIRECTION_RANGE);}else{switch(condition = Math.random() * 4 | 0){case 0:this.x = -this.OFFSET_TO_JUDGE;this.y = this.renderer.getRandomValue({min : 0, max : this.renderer.height});this.direction = this.renderer.getRandomValue({min : Math.PI / 4, max : Math.PI * 3 / 4});break;case 1:this.x = this.renderer.getRandomValue({min : 0, max : this.renderer.width});this.y = -this.OFFSET_TO_JUDGE;this.direction = this.renderer.getRandomValue({min : Math.PI * 3 / 4, max : Math.PI * 5 / 4});break;case 2:this.x = this.renderer.width + this.OFFSET_TO_JUDGE;this.y = this.renderer.getRandomValue({min : 0, max : this.renderer.height});this.direction = this.renderer.getRandomValue({min : Math.PI * 5 / 4, max : Math.PI * 7 / 4});break;case 3:this.x = this.renderer.getRandomValue({min : 0, max : this.renderer.width});this.y = this.renderer.height + this.OFFSET_TO_JUDGE;this.direction = this.renderer.getRandomValue({min : Math.PI * 3 / 4, max : Math.PI * 5 / 4});}}this.expansion = 0;this.expansionDelta = this.renderer.getRandomValue(this.EXPANSION_RANGE);this.vx = 0;this.vy = 0;this.ax = Math.sin(this.direction) * this.expansionDelta * this.ACCELERATION_RATE;this.ay = -Math.cos(this.direction) * this.expansionDelta * this.ACCELERATION_RATE;this.baseX = this.renderer.getRandomValue(this.BASE_RANGE_X);this.baseY = this.renderer.getRandomValue(this.BASE_RANGE_Y);this.baseCPX = this.renderer.getRandomValue(this.BASE_RANGE_CP_X);this.baseCPY = this.renderer.getRandomValue(this.BASE_RANGE_CP_Y);this.expansionOffset = this.renderer.getRandomValue(this.EXPANTION_OFFSET_RANGE);this.feelerLength = this.renderer.getRandomValue(this.FEELER_LENGTH_RANGE);this.feelerWidth = this.renderer.getRandomValue(this.FEELER_WIDTH_RANGE);this.extensionRate = this.renderer.getRandomValue(this.EXTENSION_RATE_RANGE);this.theta = 0;},render : function(context, x, y){context.save();context.translate(this.x, this.y);context.rotate(this.direction);var opacity = 0.1 + 0.9 * Math.pow(1 - Math.min(1, Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2)) / this.renderer.distance), 2),feelerColor = 'hsla(240, 80%, 80%, ' + 0.5 * opacity + ')',patternColor = 'hsla(240, 80%, 80%, ' + 0.8 * opacity + ')',gradient = context.createRadialGradient(0, this.baseCPY, 0, 0, this.baseCPY, this.baseY - this.baseCPY);gradient.addColorStop(0, 'hsla(245, 100%, 100%, ' + opacity + ')');gradient.addColorStop(0.5, 'hsla(245, 100%, 80%, ' + 0.6 * opacity + ')');gradient.addColorStop(1, 'hsla(245, 100%, 60%, ' + 0.4 * opacity + ')');context.fillStyle = gradient;context.strokeStyle = patternColor;context.lineWidth = 2;var baseX = this.baseX * (1 + this.expansionOffset * Math.cos(this.expansion)),theta = Math.PI / 2 - Math.abs((Math.PI - this.expansion)) / 2;context.save();this.createHead(context, baseX);context.restore();this.createMainPattern(context, baseX);this.createSubPattern(context, 0, this.baseCPY * 0.45, 0);this.createSubPattern(context, -7, this.baseCPY * 0.4, -theta);this.createSubPattern(context, 7, this.baseCPY * 0.4, theta);this.createFeeler(context, feelerColor);context.restore();if(this.expansion >= Math.PI - this.expansionDelta && this.expansion <= Math.PI){this.expansion += this.expansionDelta / this.EXTENSION_COUNT;}else{this.expansion += this.expansionDelta;}this.expansion %= Math.PI * 2;this.x += this.vx;this.y += this.vy;if(this.expansion >= 0 && this.expansion <= Math.PI){this.vx += this.ax;this.vy += this.ay;}this.vx *= this.FRICTION;this.vy *= this.FRICTION;this.judgeToReset();},createHead : function(context, baseX){context.beginPath();context.moveTo(-baseX, this.baseY);context.bezierCurveTo(-this.baseCPX, this.baseCPY, this.baseCPX, this.baseCPY, baseX, this.baseY);context.closePath();context.fill();},createMainPattern : function(context, baseX){context.beginPath();context.moveTo(-baseX * 0.6, this.baseY);context.bezierCurveTo(-this.baseCPX * 0.8, this.baseCPY * 0.5, this.baseCPX * 0.8, this.baseCPY * 0.5, baseX * 0.6, this.baseY);context.stroke();},createSubPattern : function(context, translateX, translateY, rotate){context.save();context.beginPath();context.translate(translateX, translateY);context.rotate(rotate);context.scale(1, 0.5);context.arc(0, 0, 4, 0, Math.PI * 2, false);context.stroke();context.restore();},createFeeler : function(context, feelerColor){for(var i = -3; i <= 3; i++){context.save();context.beginPath();context.strokeStyle = feelerColor;context.translate(i * 2, this.baseY);context.moveTo(0, 0);var x, cy;if(this.expansion >= 0 && this.expansion <= Math.PI){cy = (Math.PI - this.expansion) / Math.PI;x = i * this.feelerWidth * cy;}else{cy = (this.expansion - Math.PI) / Math.PI;x = i * this.feelerWidth * cy;}var rate = (cy > 0.5) ? (1 - cy) : cy;context.bezierCurveTo(x * this.extensionRate, this.feelerLength * rate, x * this.extensionRate, this.feelerLength * (1 - rate), x, this.feelerLength);context.stroke();context.restore();}},judgeToReset : function(){if(this.x < -this.OFFSET_TO_JUDGE && this.vx < 0 || this.x > this.renderer.width + this.OFFSET_TO_JUDGE && this.vx > 0|| this.y < -this.OFFSET_TO_JUDGE && this.vy < 0 || this.y > this.renderer.height + this.OFFSET_TO_JUDGE && this.vy > 0){this.init(false);}}
};
var DUST = function(renderer){this.renderer = renderer;this.init();
};
DUST.prototype = {RADIUS : 5,VELOCITY : 0.1,init : function(){var phi = this.renderer.getRandomValue({min : 0, max : Math.PI * 2});this.x = this.renderer.getRandomValue({min : 0, max : this.renderer.width});this.y = this.renderer.getRandomValue({min : 0, max : this.renderer.height});this.vx = this.VELOCITY * Math.sin(phi);this.vy = this.VELOCITY * Math.cos(phi);this.opacity = 0;this.theta = 0;this.deltaTheta = this.renderer.getRandomValue({min : Math.PI / 500, max : Math.PI / 100});this.gradient = this.renderer.context.createRadialGradient(0, 0, 0, 0, 0, this.RADIUS);this.gradient.addColorStop(0, 'hsla(220, 80%, 100%, 1)');this.gradient.addColorStop(0.1, 'hsla(220, 80%, 80%, 1)');this.gradient.addColorStop(0.25, 'hsla(220, 80%, 50%, 1)');this.gradient.addColorStop(1, 'hsla(220, 80%, 30%, 0)');},render : function(context, x, y){context.save();context.translate(this.x, this.y);context.globalAlpha = Math.abs(Math.sin(this.theta)) * (0.2 + 0.8 * Math.pow(Math.min(1, Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2)) / this.renderer.distance), 2));context.fillStyle = this.gradient;context.beginPath();context.arc(0, 0, this.RADIUS, 0, Math.PI * 2, false);context.fill();context.restore();this.x += this.vx;this.y += this.vy;this.theta += this.deltaTheta;this.theta %= Math.PI * 2;if(this.x < -this.RADIUS || this.x > this.renderer.width + this.RADIUS|| this.y < -this.RADIUS || this.y > this.renderer.height + this.RADIUS){this.init();}}
};$(function(){RENDERER.init();layui.use(['layer', 'form'], function() {var layer = layui.layer,$ = layui.jquery,form = layui.form();//自定义验证规则form.verify({userName: function(value){if(value.trim().length < 6){return '用户名不能少于6位';}},password: [/(.+){6,12}$/, '密码必须6到12位']});});
});
</script></body>
</html>

4、炫酷星空登录页面
请添加图片描述

5、蜘蛛网登录
请添加图片描述
上面这几个都不放html代码啦,因为涉及的CSS样式跟JS代码比较多,感兴趣的留言或私信都可以的!!!


http://www.mrgr.cn/p/81368136

相关文章

使用Docker搭建Redis主从集群

文章目录 ☃️前言☃️搭建❄️❄️架构❄️❄️实例说明❄️❄️搭建第一个服务器上的两个实例❄️❄️搭建第二个服务器上的一个实例 ☃️开启主从❄️❄️改配置❄️❄️重启从节点 ☃️验证 欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 …

探索ChatGPT在提高人脸识别与软性生物识准确性的表现与可解释性

概述 从GPT-1到GPT-3&#xff0c;OpenAI的模型不断进步&#xff0c;推动了自然语言处理技术的发展。这些模型在处理语言任务方面展现出了强大的能力&#xff0c;包括文本生成、翻译、问答等。 然而&#xff0c;当涉及到面部识别和生物特征估计等任务时&#xff0c;这些基于文…

Mac 硬盘空间告急,你可以试试这几款免费清理工具 Mac第三方磁盘管理工具 MacBook磁盘工具下载 cleanmymac和appcleaner哪个好

在选购 Mac 时&#xff0c;昂贵的增加自带存储空间成本&#xff0c;往往是让很多购买用户肉痛的选择&#xff0c;因此不少用户在预算有限的情况下&#xff0c;选择配置更倾向于选择更大的运行内存而非存储空间。 这也让 macOS 存储空间捉襟见肘成为不少 Mac 用户头疼的问题&am…

【STM32F4】STM32CUMX相关环境配置

一、环境配置 我们需要以下两个软件 &#xff08;一&#xff09;keil5 最正统&#xff0c;最经典的嵌入式MCU开发环境。 该环境的配置可以看看之前的文章 所需文件如下&#xff1a; 当时配置的是STC8H的环境&#xff0c;现在基于此&#xff0c;重新给STM32配置环境。能让STC…

重庆软航H5 PDF签章产品经nginx代理之后在浏览器中在线打开PDF盖章时提示:签章失败:网络错误 413 Request Entity Too Large的问题解决办法

问题现象:问题描述:在系统中集成了软航H5 PDF签章产品,软航H5 PDF签章产品的对应服务是通过nginx代理的,在奇安信浏览器中在线打开PDF点击产品的工具栏上的盖章按钮:选定印章之后,在PDF文档上选定盖章位置之后,提示:签章失败:网络错误。 最近在做这个软航H5 PDF电子签…

Java之oop(面向对象编程)

目录面向对象编程(OOP)一、面向过程与面向对象二、Java基本元素:类和对象三、对象的创建与使用1. 对象的使用2.内存解析3.匿名对象四、类的成员1. 属性1.1概念1.2分类2. 方法2.1 声明格式2.2 方法的重载2.3 可变形参的方法2.4 方法参数的值传递机制2.5 递归方法3. 构造器4.…

顺序栈的接口程序

顺序栈的接口程序 头文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h>创建顺序栈 // 指的是顺序栈中的元素的数据类型,用户可以根据需要进行修改 typedef int DataType_t; // 构造记录顺序栈SequenceStack各项参数(栈底地址+栈容量+栈顶元…

【八股】Java基础、集合、JVM

面向对象三大特性 1 封装&#xff1a; 将 方法 和 属性 写到同一个类中&#xff0c;并将属性 私有化&#xff0c;生成 get set方法&#xff0c;外部访问属性需要通过get和set方法,内部可以直接访问属性&#xff0c;这样的一个类我们认为它完成了封装。 2 继承&#xff1a; 子…

【Linux】在centos快速搭建K8S1.18集群

使用 kubeadm 创建集群帮助文档 如果您需要以下几点&#xff0c;该工具是很好的选择&#xff1a;kubeadm 一种简单的方法&#xff0c;让你尝试 Kubernetes&#xff0c;可能是第一次。现有用户自动设置群集并测试其应用程序的一种方式。其他生态系统和/或安装程序工具中的构建…

spark和scala的搭建

Scala--部署安装步骤 (1)上传并解压安装scala安装包 例:tar -zxvf scala--** -C 指定位置 (2)设置环境变量 vim /etc/profile export SCALA_HOME=spark软件包位置 export PATH=$PATH:${SCALA_HOME}/binsource /etc/profile使环境变量生效 (3)验证scala 启动成功spark--部…

网络拓扑—DNS服务搭建

作者:竹等寒 均使用Windows Server 2003进行搭建DNS服务搭建 网络拓扑 为了节省我的U盘空间,没有用路由器,所以搭建的环境只要在同网段即可。//交换机不用考虑 DNS:192.168.1.1 P C:192.168.1.2配置网络 DNSipconfig 查看网卡配置,可以看到配置成功了PCipconfig /all查看…

C++必修:从C到C++的过渡(下)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C学习 贝蒂的主页&#xff1a;Betty’s blog 1. 缺省参数 1.1. 缺省参数的使用 缺省参数是声明或定义函数时为函数的参数指定…

2023CPCC河南省赛题解+总结

2023CPCC河南省赛题解+总结比赛链接:https://codeforces.com/gym/104354 答题情况:答题情况 开题顺序是:A-F-H-K-E-B-G 题面链接:https://codeforces.com/gym/104354/attachments/download/20061/statements_2.pdf Problem A. 小水獭游河南 签到题,队友写的 题意:给你一…

新手也能学会的甘特图制作教程

## 甘特图是什么?甘特图(Gantt Chart)是一种以图表形式直观展示项目计划的工具,由20世纪初的管理学家亨利甘特(Henry Gantt)发明并命名。它具有以下几个主要特点:1. 水平时间轴甘特图的横轴是一条时间轴,通常按天、周或月来刻度,直观展示了项目从开始到结束的整个时间跨度。2.…

如何部署 wfs 分布式服务

说明&#xff1a; wfs是海量小文件存储系统。wfs1.x不直接支持分布式存储&#xff0c;但为了应对大规模部署和高可用需求&#xff0c;推荐采用如Nginx这样的负载均衡服务&#xff0c;通过合理的资源配置和定位策略&#xff0c;可以在逻辑上模拟出类似分布式的效果。也就是说&am…

4-25 WP整理

AliyunCTF 2024 - 帕鲁情绪管理 nc链接上去过掉proof看到如下交互 sha256(("zqonds929lsi1d19ayrm6xdxogid" + "????").encode()) = 447dedc4395aae3f6344689b6fdeadc71d7759c3d9b5071ce318267ed587ce97 Please input the answer: Do you want to tra…

二维前缀和与差分

前言 延续前面所讲的一维前缀和以及差分&#xff0c;现在来写写二维前缀和与差分 主要这个画图就比前面的一维前缀和与差分复杂一点&#xff0c;不过大体思路是一样的 一维和二维的主要思路在于一维是只针对对一行一列&#xff0c;而二维是针对与一个矩阵的 好吧&#xff0…

嵌入式Linux driver开发实操(十八):Linux音频ALSA开发

应用程序程序员应该使用库API,而不是内核API。alsa库提供了内核API 100%的功能,但增加了可用性方面的主要改进,使应用程序代码更简单、更美观。未来的修复程序或兼容性代码可能会放在库代码中,而不是放在内核驱动程序中。 使用ALSA API和libasound进行简单的声音播放: /*…

麒麟 Kylin V10 一键安装 Oracle 11GR2 单机 ASM(231017)

前言 Oracle 一键安装脚本&#xff0c;演示麒麟 Kylin V10 一键安装 Oracle 11GR2 单机 ASM&#xff08;231017&#xff09;过程&#xff08;全程无需人工干预&#xff09;&#xff1a;&#xff08;脚本包括 ORALCE PSU/OJVM 等补丁自动安装&#xff09; ⭐️ 脚本下载地址&a…

Hbase学习笔记

Hbase是什么 HBase是一个高可靠、高性能、面向列、可伸缩的分布式存储系统。它利用Hadoop HDFS作为其文件存储系统,并提供实时的读写的数据库系统。HBase的设计思想来源于Google的BigTable论文,是Apache的Hadoop项目的子项目。它适合于存储大表数据,并可以达到实时级别。HB…