前端H5动态背景登录页面（下）

news2025/1/11 21:01:09

最近正好有点儿时间，把之前没整理完的前端动态背景登录页面给整理一下！这是之前的连接前端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.coloradmin.cn/o/1624011.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

08 内核开发-避免冲突和死锁-mutex

08 内核开发-避免冲突和死锁-mutex

08 内核开发-避免冲突和死锁-mutex 课程简介&#xff1a; Linux内核开发入门是一门旨在帮助学习者从最基本的知识开始学习Linux内核开发的入门课程。该课程旨在为对Linux内核开发感兴趣的初学者提供一个扎实的基础&#xff0c;让他们能够理解和参与到Linux内核的开发过程中。 …
阅读更多...
U盘无法正常格式化？教你一个强力的办法

U盘无法正常格式化？教你一个强力的办法

前言 电脑格式化U盘或者移动硬盘的操作&#xff0c;相信各位小伙伴都是有一定经历的。 如果设备正常&#xff0c;那么进入到【此电脑】&#xff0c;在对应的分区点击【鼠标右键】-【格式化】就可以把对应的存储设备恢复到初始状态。 但凡事都会有例外&#xff0c;比如在格式化…
阅读更多...
实验 | RT-Thread：L1

实验 | RT-Thread：L1

1 线程间同步 同步是指按预定的先后次序进行运行&#xff0c;线程同步是指多个线程通过特定的机制&#xff08;如互斥量&#xff0c;事件对象&#xff0c;临界区&#xff09;来控制线程之间的执行顺序&#xff0c;也可以说是在线程之间通过同步建立起执行顺序的关系&#xff0…
阅读更多...
海外短剧：跨文化的新浪潮与看剧系统的搭建，海外短剧系统搭建开发定制

海外短剧：跨文化的新浪潮与看剧系统的搭建，海外短剧系统搭建开发定制

在全球化的大潮下&#xff0c;海外短剧作为一种新兴的文化交流方式&#xff0c;正逐渐受到越来越多人的喜爱。这种融合了各地文化元素、叙事手法新颖独特的短剧形式&#xff0c;不仅丰富了观众的视觉体验&#xff0c;也为影视媒体和想拓展海外市场的企业带来了无限商机。 一、…
阅读更多...
【深度学习-第5篇】使用Python快速实现CNN分类（模式识别）任务，含一维、二维、三维数据演示案例（使用pytorch框架）

【深度学习-第5篇】使用Python快速实现CNN分类（模式识别）任务，含一维、二维、三维数据演示案例（使用pytorch框架）

在之前的文章中介绍了CNN的图解入门&#xff0c;CNN的MATLAB分类实现&#xff0c;CNN的MATLAB回归实现。 卷积神经网络(Convolutional Neural Networ&#xff0c;简称CNN)是一种广泛应用于图像识别领域的深度学习算法。它通过模拟人类视觉系统的层次结构&#xff0c;可以自动提…
阅读更多...
Docker NetWork (网络)

Docker NetWork (网络)

Docker 为什么需要网络管理 容器的网络默认与宿主机及其他容器都是相互隔离的&#xff0c;但同时我们也要考虑下面的一些问题&#xff0c; 比如 多个容器之间是如何通信的容器和宿主机是如何通信的容器和外界主机是如何通信的容器中要运行一些网络应用(如 nginx、web 应用、数…
阅读更多...
HarmonyOS hsp制作与引用

HarmonyOS hsp制作与引用

1. HarmonyOS hsp制作与引用 1.1 介绍 HSP动态共享包&#xff08;模块&#xff09;,应用内HSP指的是专门为某一应用开发的HSP&#xff0c;只能被该应用内部其他HAP/HSP使用&#xff0c;用于应用内部代码、资源的共享。应用内HSP跟随其宿主应用的APP包一起发布&#xff0c;与该…
阅读更多...
「deepin生态共建小组」正式启动招募！三大生态共建项目，速来 ！

「deepin生态共建小组」正式启动招募！三大生态共建项目，速来 ！

基于社区开源精神&#xff0c;为提高大家对deepin生态建设的参与感&#xff0c;应用商店将正式开放众多软件给广大开源爱好者进行维护。参与小组工作可获得多项专属小组福利&#xff0c;工作项目分为玲珑格式迁移、wine应用打包、deb原生应用维护。 招募条件 1&#xff09;不限…
阅读更多...
【C/C++笔试练习】OSI分层模型、源端口和目的端口、网段地址、SNMP、状态码、tcp报文、域名解析、HTTP协议、计算机网络、美国节日、分解因数

【C/C++笔试练习】OSI分层模型、源端口和目的端口、网段地址、SNMP、状态码、tcp报文、域名解析、HTTP协议、计算机网络、美国节日、分解因数

文章目录 C/C笔试练习选择部分&#xff08;1&#xff09;OSI分层模型&#xff08;2&#xff09;源端口和目的端口&#xff08;3&#xff09;网段地址&#xff08;4&#xff09;SNMP&#xff08;5&#xff09;状态码&#xff08;6&#xff09;tcp报文&#xff08;7&#xff09;域…
阅读更多...
使用python setup.py报错：Upload failed (403) / Upload failed (400)

使用python setup.py报错：Upload failed (403) / Upload failed (400)

当前报错的环境 Python 3.9.19twine1.15.0 本地~/.pypirc已正确配置了用户名和密码&#xff0c;用在pypi.org注册&#xff1a; [pypi]username skylerhupassword ${password}执行 python setup.py sdist upload -r pypi 打包上传到仓库报错。 在不久之前同样的环境&#…
阅读更多...
C语言扫雷游戏完整实现(上)

C语言扫雷游戏完整实现(上)

文章目录 前言一、新建好头文件和源文件二、实现游戏菜单选择功能三、定义游戏函数四、初始化棋盘五、 打印棋盘函数六、布置雷函数七、玩家排雷菜单八、标记功能的菜单九、标记功能菜单的实现总结 前言 C语言从新建文件到游戏菜单&#xff0c;游戏函数&#xff0c;初始化棋盘…
阅读更多...
网工交换基础——生成树协议（01）

网工交换基础——生成树协议（01）

一、生成树的技术概述 1、技术背景 二层交换机网络的冗余性导致出现二层环路&#xff1a; 人为因素导致的二层环路问题&#xff1a; 二层环路带来的网络问题&#xff1a; 生成树协议的概念&#xff1a; STP(Spanning Tree Protocol)是生成树协议的英文缩写。该协议可应用于在网…
阅读更多...
如何分析和优化慢sql语句

如何分析和优化慢sql语句

前言 sql查询速度比较慢容易成为性能瓶颈,这时我们可以优化我们的sql语句或数据库表 一般sql语句执行很慢的种类分为: 1.聚合查询 2.多表查询 3.表数据量过大查询 4.深度分页查询 这四种的前三种都可以通过优化sql语句来优化sql查询速度 正文 聚合查询 我们可以通过尝…
阅读更多...
机器人视觉教学实训平台

机器人视觉教学实训平台

一&#xff1a;功能概述 1.1、功能简介 机器人视觉教学实训平台基于睿尔曼机器人与海康机器视觉产品&#xff0c;面向机器人视觉系统应用而开发设计&#xff0c;产品涵盖机器人系统、工业视觉系统、自动化控制系统、计算机编程系统&#xff0c;可以在一台设备上进行多种与机器…
阅读更多...
C++初阶学习第三弹——类与对象（上）——初始类与对象

C++初阶学习第三弹——类与对象（上）——初始类与对象

前言&#xff1a; 在前面&#xff0c;我们已经初步学习了C的一些基本语法&#xff0c;比如内敛函数、函数重载、缺省参数、引用等等&#xff0c;接下来我们就将正式步入C的神圣殿堂&#xff0c;首先&#xff0c;先给你找个对象 目录 一、类与对象是什么&#xff1f; 二、类的各…
阅读更多...
Git 工作原理

Git 工作原理

Git 工作原理 | CoderMast编程桅杆https://www.codermast.com/dev-tools/git/git-workspace-index-repo.html Workspace&#xff1a;工作区Index / Stage&#xff1a;暂存区Repository&#xff1a;仓库区&#xff08;或本地仓库&#xff09;Remote&#xff1a;远程仓库 Git 一…
阅读更多...
如何优雅的实现 iframe 多层级嵌套通讯

如何优雅的实现 iframe 多层级嵌套通讯

前言 在前端开发项目中&#xff0c;不可避免的总会和 iframe 进行打交道&#xff0c;我们通常会使用 postMessage 实现消息通讯。 如果存在下面情况&#xff1a; iframe 父子通讯iframe 同层级通讯iframe 嵌套层级通讯 当面对这种复杂的情况的时候&#xff0c;通讯不可避免…
阅读更多...
Uptime Kuma 使用指南：一款简单易用的站点监控工具

Uptime Kuma 使用指南：一款简单易用的站点监控工具

我平时的工作会涉及到监控&#xff0c;而站点是一个很重要的监控项。项目上线后&#xff0c;我们通常会将站点监控配置到云平台上&#xff0c;以检测各站点的连通性。但随着项目不断增多&#xff0c;云平台上的配额就有点捉急了。针对这个情况&#xff0c;我们可以试试这个开源…
阅读更多...
李沐49_样式迁移——自学笔记

李沐49_样式迁移——自学笔记

样式迁移 将样式图片中的样式迁移到内容图片上&#xff0c;合成图片&#xff0c;例如将照片转换成漫画形式或者是油画风。 基于CNN的样式迁移 读取图片和样式风格 %matplotlib inline import torch import torchvision from torch import nn from d2l import torch as d2ld…
阅读更多...
Facebook的魅力魔法：探访数字社交的奇妙世界

Facebook的魅力魔法：探访数字社交的奇妙世界

1. 社交媒体的演变与Facebook的角色 在数字化时代&#xff0c;社交媒体已经成为我们日常生活中不可或缺的一部分。而在众多的社交媒体平台中&#xff0c;Facebook 以其深厚的历史和广泛的影响力&#xff0c;成为了全球数亿用户沟通、分享和互动的主要场所。从其初创之时起&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023