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

最近正好有点儿时间,把之前没整理完的前端动态背景登录页面给整理一下!这是之前的连接前端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.mzph.cn/pingmian/3044.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python程序设计教案

文章目录&#xff1a; 一&#xff1a;软件环境安装 第一个软件&#xff1a;pycharm 第二个软件&#xff1a;thonny 第三个软件&#xff1a;IDIE&#xff08;自带的集成开发环境&#xff09; 二&#xff1a;相关 1.规范 2.关键字 3.Ascll码表 三&#xff1a;语法基础…

【Altium Designer 22原理图,PCB】

Altium Designer 22-原理图&#xff0c;PCB ■ AD22■ 工程■ 工程之外的文件 ■ AD22-画原理图■ 原理图库的设计■ 操作心得■ 元件库来源■ 检查原理图库的正确性并生成报告 ■ 原理图的设计■ 原理图页的大小设置■ 设置栅格100mil■ 放置元器件■ 元件的复制&#xff0c;剪…

从 MySQL 到 ClickHouse 实时数据同步 —— Debezium + Kafka 表引擎

目录 一、总体架构 二、安装配置 MySQL 主从复制 三、安装配置 ClickHouse 集群 四、安装 JDK 五、安装配置 Zookeeper 集群 六、安装配置 Kafaka 集群 七、安装配置 Debezium-Connector-MySQL 插件 1. 创建插件目录 2. 解压文件到插件目录 3. 配置 Kafka Connector …

常见UI设计模式有哪些?从小白到资深必学

通过了解如何以及何时使用&#xff0c;每种 UI 设计模式都有其特定的目的&#xff0c;可以创建一个一致高效的界面。UI 设计模式为用户界面设计者提供了一种通用语言&#xff0c;并为网站和应用程序的用户提供了一致性。本指南&#xff0c;即时设计总结了 UI 设计模式和 UI 设计…

HTTP协议的总结

参考 https://www.runoob.com/http/http-tutorial.html 1.简介 HTTP&#xff08;超文本传输协议&#xff0c;Hypertext Transfer Protocol&#xff09;是一种用于从网络传输超文本到本地浏览器的传输协议。它定义了客户端与服务器之间请求和响应的格式。HTTP 工作在 TCP/IP 模…

美客多、Lazada商家必须知道的养号技巧,助力打造爆款!

在Lazada平台开店&#xff0c;每个商家都渴望打造出自己的爆款产品。爆款不仅能为店铺带来大量流量&#xff0c;还能显著提升店铺和其他产品的转化率。然而&#xff0c;要想成功打造爆款&#xff0c;并非易事&#xff0c;需要掌握一些关键的小技能。 在Lazada平台&#xff0c;商…

每日OJ题_BFS解决拓扑排序③_力扣LCR 114. 火星词典

目录 力扣LCR 114. 火星词典 解析代码 力扣LCR 114. 火星词典 LCR 114. 火星词典 难度 困难 现有一种使用英语字母的外星文语言&#xff0c;这门语言的字母顺序与英语顺序不同。 给定一个字符串列表 words &#xff0c;作为这门语言的词典&#xff0c;words 中的字符串已…

十五、Java中I/O流

1、流的基本概念 1)流的概念 流:在Java中所有的数据都是使用流读写的。流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象。即数据在两设备间的传输称为流,流的本质就是数据传输,根据数据传输特性将流抽象为各种类。 (1)按照流向分:输入流、输出流。…

网络靶场实战-物联网安全qiling框架初探

背景 Qiling Framework是一个基于Python的二进制分析、模拟和虚拟化框架。它可以用于动态分析和仿真运行不同操作系统、处理器和体系结构下的二进制文件。除此之外&#xff0c;Qiling框架还提供了易于使用的API和插件系统&#xff0c;方便使用者进行二进制分析和漏洞挖掘等工作…

【求助】西门子S7-200PLC定时中断+数据归档的使用

前言 已经经历了种种磨难来记录我的数据&#xff08;使用过填表程序、触摸屏的历史记录和数据归档&#xff09;之后&#xff0c;具体可以看看这篇文章&#xff1a;&#x1f6aa;西门子S7-200PLC的数据归档怎么用&#xff1f;&#xff0c;出现了新的问题。 问题的提出 最新的…

网工交换基础——生成树协议(01)

一、生成树的技术概述 1、技术背景 二层交换机网络的冗余性导致出现二层环路&#xff1a; 人为因素导致的二层环路问题&#xff1a; 二层环路带来的网络问题&#xff1a; 生成树协议的概念&#xff1a; STP(Spanning Tree Protocol)是生成树协议的英文缩写。该协议可应用于在网…

面向对象练习坦克大兵游戏

游戏玩家&#xff08;名称&#xff0c;生命值&#xff0c;等级&#xff09;&#xff0c;坦克&#xff0c;大兵类&#xff0c;玩家之间可以相互攻击&#xff0c;大兵拥有武器&#xff0c;用枪弹和反坦克炮弹&#xff0c;造成攻击不同&#xff0c;坦克攻击值固定&#xff0c;请设…

设计模式-六大原则

设计模式的六大原则是软件工程中的基本概念&#xff0c;使得构建可维护、可扩展和可重用的代码。 1.单一职责原则&#xff08;Single Responsibility Principle&#xff09;&#xff1a;一个类或方法应该只有一个引起变化的原因&#xff0c;确保类或模块的功能高度内聚。 案例&…

VMware-Linux切换桥接模式上网教程(超详细)

这里写目录标题 1. 虚拟机关机2. VMware 虚拟网络配置2.1 检查是否存在 VMnet02.2 修改桥接模式2.3 修改Linux虚拟机网络适配器 3. Linux 系统配置3.1 修改系统网卡配置3.1.1 配置项含义解释3.1.2 查看物理机网络信息3.3.3 修改配置 3.2 重启服务 4. 测试网络连接情况5. 注意事…

【SpringBoot整合系列】SpringBoot整合JPA

目录 前期回顾ORM解决方案 JPA简介JPA的组成技术ORM映射元数据Java持久化API查询语言&#xff08;JPQL&#xff09; JPA的优势JPA的缺点 Spring Data JPASpring Data JPA简介Spring Data 家族Spring Data JPA、JPA和其他框架之间的关系 SpringBoot整合JPAJPA的核心注解1.依赖2.…

element-ui upload 组件 手动多次出发 submit

element 上传组件 upload 上传成功以后&#xff0c;想重新 调用 submit()函数&#xff0c;发现是不可以进行多次触发的,。 直接上解决方法&#xff0c;在上传成功后的钩子函数里添加:fileList[0l.status ready fileList是文件列表&#xff0c;status是单文件的状态改成ready就…

【Fastadmin】表格导出excel,图片显示太大

目录 1.直接导出示例 2.解决办法 3. 再次导出效果 1.直接导出示例 图片过大&#xff0c;格式错乱 2.解决办法 在js页面加入代码 // 导出图片过大处理 exportOptions: {ignoreColumn: [0, operate],onBeforeSaveToFile: function (data, fileName, type, charset, encoding,…

《深入Linux设备驱动程序内核机制》学习笔记-第4章

前言 本文是《深入Linux设备驱动程序内核机制》的读书笔记&#xff0c;本文因为是读书笔记所以抄写引用了该书中的大量内容&#xff0c;写读书笔记的目的是在写作的过程中加深对书中内容的理解。 建议读者直接阅读《深入Linux设备驱动程序内核机制》&#xff0c;这本书是Linu…

mPEG-Dansyl,Methoxy PEG Dansyl由甲氧基-聚乙二醇(mPEG)和丹磺酰氯(Dansyl)两部分组成

【试剂详情】 英文名称 mPEG-Dansyl&#xff0c;Methoxy PEG Dansyl 中文名称 聚乙二醇单甲醚丹磺酸酯&#xff0c;甲氧基-聚乙二醇-丹磺酰胺 外观性状 由分子量决定&#xff0c;液体或者固体 分子量 0.4k&#xff0c;0.6k&#xff0c;1k&#xff0c;2k&#xff0c;3.4k…

前端发送请求,显示超时取消

前端发送请求&#xff0c;显示超时取消 问题说明&#xff1a;后台接口请求60s尚未完成&#xff0c;前端控制台显示取消&#xff08;canceled&#xff09; 原因 1、前端设置60s超时则取消 2、后台接口响应时间过长&#xff0c;过长的原因统计的数据量多&#xff08;实际也才17…