5个炫酷登录页面,拿去就能用(附源码)

2023-11-06

❤ 5个炫酷登录页面,拿去就能用(附源码)

登录页面,觉得显示效果很好,借鉴其他博主的,喜欢的可以收藏关注,不商用,只为学习传播

目录
1、炫酷星空登录
2、动态云层登录
3、深海灯光水母登录
4、炫酷蛛网登录
5、彩色气泡登录

1、炫酷星空登录

实现效果

在这里插入图片描述


<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>太白</title>
	<meta name="keywords" content="HTML5,美观,简洁大气,响应式,第三方登录,网页模板" />
	<meta name="description" content="HTML5美观简洁大气响应式带第三方登录网页模板下载。鼠标经过登录按钮带紫色渐变炫酷动画效果。带有简单的表单验证功能。" /> 

	<link rel="stylesheet" type="text/css" href="./js/login/css/bootstrap.min.css">

	<link rel="stylesheet" type="text/css" href="http://demo.sucaihuo.com/modals/49/4919/demo/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	

	<!-- <link rel="stylesheet" type="text/css" href="./js/login/font-awesome.min.css"> -->
	<!-- <link rel="stylesheet" type="text/css" href="./js/login/material-design-iconic-font.min.css"> -->
	<link rel="stylesheet" type="text/css" href="http://demo.sucaihuo.com/modals/49/4919/demo/fonts/iconic/css/material-design-iconic-font.min.css">
	
	<link rel="stylesheet" type="text/css" href="../js/login/util.css">
	<link rel="stylesheet" type="text/css" href="../js/login/main.css">
	<style>
	.J_codeimg{z-index:-1;position:absolute;}
	.login100-form {
	    width: 580px;
	    padding: 30px;
	    background: #a4a4a4;
	    z-index: 999;
	    position: fixed;
	    color: #fff;
	    border-radius: 20px;
	    top: 10%;
	    left: 35%;
	}
	</style>
</head>

<body>
	<canvas id="canvas" style="position: fixed;width: 100%;height: 100vh;"></canvas> 
	<div class="limiter">
		<div class="container-login100" style="background-image: url('./image/bg-01.jpg');">
			<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
				<form class="login100-form validate-form">
					<span class="login100-form-title p-b-49" style="color: #fff;">登录</span>

					<div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
						<span class="label-input100"  style="color: #fff;">用户名</span>
						<input class="input100" type="text" name="username" placeholder="请输入用户名" autocomplete="off">
						<span class="focus-input100" data-symbol="&#xf206;"></span>
					</div>

					<div class="wrap-input100 validate-input" data-validate="请输入密码">
						<span class="label-input100"  style="color: #fff;">密码</span>
						<input class="input100" type="password" name="pass" placeholder="请输入密码">
						<span class="focus-input100" data-symbol="&#xf190;"></span>
					</div>

					<div class="text-right p-t-8 p-b-31">
						<a href="javascript:">忘记密码?</a>
					</div>

					<div class="container-login100-form-btn">
						<div class="wrap-login100-form-btn">
							<div class="login100-form-bgbtn"></div>
							<button class="login100-form-btn">登 录</button>
						</div>
					</div>

					<div class="txt1 text-center p-t-54 p-b-20">
						<span>第三方登录</span>
					</div>

					<div class="flex-c-m">
						<a href="#" class="login100-social-item bg1">
							<i class="fa fa-wechat"></i>
						</a>

						<a href="#" class="login100-social-item bg2">
							<i class="fa fa-qq"></i>
						</a>

						<a href="#" class="login100-social-item bg3">
							<i class="fa fa-weibo"></i>
						</a>
					</div>

					<div class="flex-col-c p-t-25">
						<a href="javascript:" class="txt2">立即注册</a>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script>
	$(document).ready(function() {
	  //验证码
	  createCode();
	});
	</script>
	<script src="../js/login/jquery-3.2.1.min.js"></script>
	<script src="../js/login/main.js"></script>
	<script>
	//宇宙特效
	"use strict";
	var canvas = document.getElementById('canvas'),
	  ctx = canvas.getContext('2d'),
	  w = canvas.width = window.innerWidth,
	  h = canvas.height = window.innerHeight,
	 
	  hue = 217,
	  stars = [],
	  count = 0,
	  maxStars = 2500;//星星数量
	 
	var canvas2 = document.createElement('canvas'),
	  ctx2 = canvas2.getContext('2d');
	canvas2.width = 100;
	canvas2.height = 100;
	var half = canvas2.width / 2,
	  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
	gradient2.addColorStop(0.025, '#CCC');
	gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
	gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
	gradient2.addColorStop(1, 'transparent');
	 
	ctx2.fillStyle = gradient2;
	ctx2.beginPath();
	ctx2.arc(half, half, half, 0, Math.PI * 2);
	ctx2.fill();
	 
	// End cache
	 
	function random(min, max) {
	  if (arguments.length < 2) {
	    max = min;
	    min = 0;
	  }
	 
	  if (min > max) {
	    var hold = max;
	    max = min;
	    min = hold;
	  }
	 
	  return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	 
	function maxOrbit(x, y) {
	  var max = Math.max(x, y),
	    diameter = Math.round(Math.sqrt(max * max + max * max));
	  return diameter / 2;
	  //星星移动范围,值越大范围越小,
	}
	 
	var Star = function() {
	 
	  this.orbitRadius = random(maxOrbit(w, h));
	  this.radius = random(60, this.orbitRadius) / 18; 
	  //星星大小
	  this.orbitX = w / 2;
	  this.orbitY = h / 2;
	  this.timePassed = random(0, maxStars);
	  this.speed = random(this.orbitRadius) / 500000; 
	  //星星移动速度
	  this.alpha = random(2, 10) / 10;
	 
	  count++;
	  stars[count] = this;
	}
	 
	Star.prototype.draw = function() {
	  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
	    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
	    twinkle = random(10);
	 
	  if (twinkle === 1 && this.alpha > 0) {
	    this.alpha -= 0.05;
	  } else if (twinkle === 2 && this.alpha < 1) {
	    this.alpha += 0.05;
	  }
	 
	  ctx.globalAlpha = this.alpha;
	  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
	  this.timePassed += this.speed;
	}
	 
	for (var i = 0; i < maxStars; i++) {
	  new Star();
	}
	 
	function animation() {
	  ctx.globalCompositeOperation = 'source-over';
	  ctx.globalAlpha = 0.5; //尾巴
	  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
	  ctx.fillRect(0, 0, w, h)
	 
	  ctx.globalCompositeOperation = 'lighter';
	  for (var i = 1, l = stars.length; i < l; i++) {
	    stars[i].draw();
	  };
	 
	  window.requestAnimationFrame(animation);
	}
	 
	animation();
	</script>
</body>

</html>

2、动态云层登录

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>登录界面</title>
		<link href="css/default.css" rel="stylesheet" type="text/css" />
		<!--必要样式-->
		<link href="css/styles.css" rel="stylesheet" type="text/css" />
		<link href="css/demo.css" rel="stylesheet" type="text/css" />
		<link href="css/loaders.css" rel="stylesheet" type="text/css" />
	</head>
 
	<body>
		<div class='login'>
			<div class='login_title'>
				<span>管理员登录</span>
			</div>
			<div class='login_fields'>
				<div class='login_fields__user'>
					<div class='icon'>
						<img alt="" src='img/user_icon_copy.png'>
					</div>
					<input name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" value="kbcxy" />
					<div class='validation'>
						<img alt="" src='img/tick.png'>
					</div>
				</div>
				<div class='login_fields__password'>
					<div class='icon'>
						<img alt="" src='img/lock_icon_copy.png'>
					</div>
					<input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off">
					<div class='validation'>
						<img alt="" src='img/tick.png'>
					</div>
				</div>
				<div class='login_fields__password'>
					<div class='icon'>
						<img alt="" src='img/key.png'>
					</div>
					<input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
					<div class='validation' style="opacity: 1; right: -5px;top: -3px;">
						<canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起,您的浏览器不支持canvas,请下载最新版浏览器!</canvas>
					</div>
				</div>
				<div class='login_fields__submit'>
					<input type='button' value='登录'>
				</div>
			</div>
			<div class='success'>
			</div>
			<div class='disclaimer'>
				<p>欢迎登陆后台管理系统</p>
			</div>
		</div>
		<div class='authent'>
			<div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
				<div class="loader-inner ball-clip-rotate-multiple">
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<p>认证中...</p>
		</div>
		<div class="OverWindows"></div>
		
		<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
		
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui.min.js"></script>
		<script type="text/javascript" src='js/stopExecutionOnTimeout.js?t=1'></script>
		<script type="text/javascript" src="layui/layui.js"></script>
		<script type="text/javascript" src="js/Particleground.js"></script>
		<script type="text/javascript" src="Js/Treatment.js"></script>
		<script type="text/javascript" src="js/jquery.mockjax.js"></script>
		<script type="text/javascript">
			var canGetCookie = 0; //是否支持存储Cookie 0 不支持 1 支持
			var ajaxmockjax = 1; //是否启用虚拟Ajax的请求响 0 不启用  1 启用
			//默认账号密码
 
			var truelogin = "kbcxy";
			var truepwd = "1";
 
			var CodeVal = 0;
			Code();
 
			function Code() {
				if(canGetCookie == 1) {
					createCode("AdminCode");
					var AdminCode = getCookieValue("AdminCode");
					showCheck(AdminCode);
				} else {
					showCheck(createCode(""));
				}
			}
 
			function showCheck(a) {
				CodeVal = a;
				var c = document.getElementById("myCanvas");
				var ctx = c.getContext("2d");
				ctx.clearRect(0, 0, 1000, 1000);
				ctx.font = "80px 'Hiragino Sans GB'";
				ctx.fillStyle = "#E8DFE8";
				ctx.fillText(a, 0, 100);
			}
			$(document).keypress(function(e) {
				// 回车键事件  
				if(e.which == 13) {
					$('input[type="button"]').click();
				}
			});
			//粒子背景特效
			//			$('body').particleground({
			//				dotColor: '#E8DFE8',
			//				lineColor: '#133b88'
			//			});
			//			$('input[name="pwd"]').focus(function() {
			//				$(this).attr('type', 'password');
			//			});
			//			$('input[type="text"]').focus(function() {
			//				$(this).prev().animate({
			//					'opacity': '1'
			//				}, 200);
			//			});
			//			$('input[type="text"],input[type="password"]').blur(function() {
			//				$(this).prev().animate({
			//					'opacity': '.5'
			//				}, 200);
			//			});
			//			$('input[name="login"],input[name="pwd"]').keyup(function() {
			//				var Len = $(this).val().length;
			//				if(!$(this).val() == '' && Len >= 5) {
			//					$(this).next().animate({
			//						'opacity': '1',
			//						'right': '30'
			//					}, 200);
			//				} else {
			//					$(this).next().animate({
			//						'opacity': '0',
			//						'right': '20'
			//					}, 200);
			//				}
			//			});
			var open = 0;
			layui.use('layer', function() {
				//非空验证
				$('input[type="button"]').click(function() {
					var login = $('input[name="login"]').val();
					var pwd = $('input[name="pwd"]').val();
					var code = $('input[name="code"]').val();
					if(login == '') {
						ErroAlert('请输入您的账号');
					} else if(pwd == '') {
						ErroAlert('请输入密码');
					} else if(code == '' || code.length != 4) {
						ErroAlert('输入验证码');
					} else {
						//登陆
						var JsonData = {
							login: login,
							pwd: pwd,
							code: code
						};
						//$.post("url",JsonData,function(data) {
						console.log(111);
						alert("登录成功");
						//window.location.href = 'http://127.0.0.1:8020/jQueryLogin/index.html?__hbt=1567408106021';
						//});						
					}
				})
			})
			//全屏
			var fullscreen = function() {
				elem = document.body;
				if(elem.webkitRequestFullScreen) {
					elem.webkitRequestFullScreen();
				} else if(elem.mozRequestFullScreen) {
					elem.mozRequestFullScreen();
				} else if(elem.requestFullScreen) {
					elem.requestFullscreen();
				} else {
					//浏览器不支持全屏API或已被禁用  
				}
			}
		</script>
		<script type="text/javascript" src="img/ThreeWebGL.js"></script>
		<script type="text/javascript" src="img/ThreeExtras.js"></script>
		<script type="text/javascript" src="img/Detector.js"></script>
		<script type="text/javascript" src="img/RequestAnimationFrame.js"></script>
		<script id="vs" type="x-shader/x-vertex">
			varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
		</script>
		<script id="fs" type="x-shader/x-fragment">
			uniform sampler2D map; uniform vec3 fogColor; uniform float fogNear; uniform float fogFar; varying vec2 vUv; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep( fogNear, fogFar, depth ); gl_FragColor = texture2D( map, vUv ); gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 ); gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor ); }
 
		</script>
		<script type="text/javascript">
			if(!Detector.webgl) Detector.addGetWebGLMessage();
			var canvas = document.createElement('canvas');
			canvas.width = 32;
			canvas.height = window.innerHeight;
			var context = canvas.getContext('2d');
			var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
			gradient.addColorStop(0, "#1e4877");
			gradient.addColorStop(0.5, "#4584b4");
			context.fillStyle = gradient;
			context.fillRect(0, 0, canvas.width, canvas.height);
			document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
			var container;
			var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [],
				sprite, size, x, y, z;
			var mouseX = 0,
				mouseY = 0;
			var start_time = new Date().getTime();
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			init();
			animate();
 
			function init() {
				container = document.createElement('div');
				document.body.appendChild(container);
				camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 3000);
				camera.position.z = 6000;
				scene = new THREE.Scene();
				geometry = new THREE.Geometry();
				var texture = THREE.ImageUtils.loadTexture('data:image/png;base64,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');
				texture.magFilter = THREE.LinearMipMapLinearFilter;
				texture.minFilter = THREE.LinearMipMapLinearFilter;
				var fog = new THREE.Fog(0x4584b4, -100, 3000);
				material = new THREE.MeshShaderMaterial({
					uniforms: {
						"map": {
							type: "t",
							value: 2,
							texture: texture
						},
						"fogColor": {
							type: "c",
							value: fog.color
						},
						"fogNear": {
							type: "f",
							value: fog.near
						},
						"fogFar": {
							type: "f",
							value: fog.far
						},
					},
					vertexShader: document.getElementById('vs').textContent,
					fragmentShader: document.getElementById('fs').textContent,
					depthTest: false
				});
				var plane = new THREE.Mesh(new THREE.Plane(64, 64));
				for(i = 0; i < 8000; i++) {
					plane.position.x = Math.random() * 1000 - 500;
					plane.position.y = -Math.random() * Math.random() * 200 - 15;
					plane.position.z = i;
					plane.rotation.z = Math.random() * Math.PI;
					plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
					GeometryUtils.merge(geometry, plane)
				}
				mesh = new THREE.Mesh(geometry, material);
				scene.addObject(mesh);
				mesh = new THREE.Mesh(geometry, material);
				mesh.position.z = -8000;
				scene.addObject(mesh);
				renderer = new THREE.WebGLRenderer({
					antialias: false
				});
				renderer.setSize(window.innerWidth, window.innerHeight);
				container.appendChild(renderer.domElement);
				document.addEventListener('mousemove', onDocumentMouseMove, false);
				window.addEventListener('resize', onWindowResize, false)
			}
 
			function onDocumentMouseMove(event) {
				mouseX = (event.clientX - windowHalfX) * 0.25;
				mouseY = (event.clientY - windowHalfY) * 0.15
			}
 
			function onWindowResize(event) {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth, window.innerHeight)
			}
 
			function animate() {
				requestAnimationFrame(animate);
				render()
			}
 
			function render() {
				position = ((new Date().getTime() - start_time) * 0.03) % 8000;
				camera.position.x += (mouseX - camera.target.position.x) * 0.01;
				camera.position.y += (-mouseY - camera.target.position.y) * 0.01;
				camera.position.z = -position + 8000;
				camera.target.position.x = camera.position.x;
				camera.target.position.y = camera.position.y;
				camera.target.position.z = camera.position.z - 1000;
				renderer.render(scene, camera)
			}
		</script>
	</body>
 
</html>

03 光线粒子登录

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- 最新的 fontawesome 核心 css 文件 -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"/>

<script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<style>
body {background: #000;min-height: 768px;}
html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td {
margin: 0;
padding: 0;
list-style-type: none;
}
body{min-width: 1200px;position: relative;}
body, button, input, select, textarea {
font: .9em "微软雅黑";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow:-Scroll;
overflow-x:hidden;
}
a {color: #000;position: relative;}
*{margin: 0;padding:0;}
ul, ol ,a{list-style: none;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;color: #000;}
a:active {text-decoration: none;}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:2px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
width: 3px;
background:rgba(0,0,0,0.3);
}
/*背景虚化*/
.blur {
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
/*区域内虚化 值:像素*/
.blur {
-webkit-filter: blur(2px); /* Chrome, Opera */
-moz-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
.bg-canvas {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
min-height: 768px;
}
.bg-canvas iframe{
border: 0px;
width: 100%;
height: 100%;
}
.cont {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
.cont section {
width: 1200px;
height: 100%;
margin: 0 auto;
}
.cont_left {
position: relative;
top: 46%;
width: 650px;
float: left;
color: #fff;
}
.cont_left h1 {
font-size: 48px;
font-weight: 900;
margin-bottom: 10px;
letter-spacing: 4px
}
.cont_right {
position: relative;
top: 33%;
right: 0px;
float: right;
width: 350px;
height: 350px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.5);
/*黑色的样式不好使*/
/*color: #fff;*/
border-radius: 10px;
padding:50px 15px;
}
.cont_right h2 {
margin-bottom: 35px;
color:#fff;
}
.form-group {margin-bottom: 50px;}
.form-group p {
position: relative;
}
.form-group p i {
width: 34px;
height: 34px;
font-size: 20px;
text-align: center;
line-height: 34px;
position: absolute;
top: 0;
left: 0;
color:#000;
/*黑色的样式不好使*/
/*color: #fff;*/
}
.form-group p a {
width: 34px;
height: 34px;
font-size: 20px;
text-align: center;
line-height: 34px;
position: absolute;
top: 0;
right: 0;
color:#000;
/*黑色的样式不好使*/
/*color: #fff;*/
}
.form-group input {
padding-left: 34px;
/*黑色的样式不好使*/
/*background:rgba(0,0,0,.1);
color:#fff;
border: 1px solid rgba(255,255,255,.2);*/
}
.form-group input[id="inputEmail3"] {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.form-group input[id="exampleInputPassword3"] {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
</style>
<body id="body">
<nav class="bg-canvas blur"><iframe name="htm" src="http://www.jq22.com/js/a5.html"></iframe></nav>
<section class="cont">
<section>
<nav class="cont_left">
<p><h1>XX后台管理系统登陆</h1>
<p style="text-align: right;font-size: 20px;">综合监控、统计报表、资产管理系统</p>
</p>
</nav>
<nav class="cont_right">
<h2>平台登陆</h2>
<div class="form-group">
<p><i class="fa fa-user"></i><input type="text" class="form-control" id="inputEmail3" name="name" placeholder="请输入用户名"></p>
<p><i class="fa fa-key"></i>
<input type="password" class="form-control" id="exampleInputPassword3" name="pwdPrompt" placeholder="请输入密码">
<input type="text" class="form-control" id="exampleInputPassword3" name="pwd" placeholder="请输入密码" style="display: none;">
<a class="eye"><i class="fa fa-eye-slash"></i></a></p>
</div>
<button type="button" class="btn btn-primary btn-lg btn-block">登陆</button>
</div>
</nav>
</section>
</section>
</body>
<script src="js/jquery.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script>
$(function (){
$("#body").height($(window).height());
})
$(".eye").mouseover(function () {
$("input[name=pwd]").val($("input[name=pwdPrompt]").val());
$("input[name=pwdPrompt]").hide();
$("input[name=pwd]").show().focus();
$(".eye i").removeClass("fa-eye-slash");
$(".eye i").addClass("fa-eye");


});
$(".eye").mouseout(function () {
$("input[name=pwdPrompt]").val($("input[name=pwd]").val());
$("input[name=pwdPrompt]").show().focus();
$("input[name=pwd]").hide();
$(".eye i").removeClass("fa-eye");
$(".eye i").addClass("fa-eye-slash");
})
</script>
</html>

04、 深海水母

在这里插入图片描述

<!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>

05、炫酷蛛网登录

在这里插入图片描述

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
 
    <title>视联网云接入</title>
    <link rel="icon" href="loginSpecial/images/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="loginSpecial/images/favicon.ico" type="image/x-icon"/>
    <link href="loginSpecial/css/default.css" rel="stylesheet" type="text/css" />
    <!--必要样式-->
    <link href="loginSpecial/css/styles.css" rel="stylesheet" type="text/css" />
    <link href="loginSpecial/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="loginSpecial/css/loaders.css" rel="stylesheet" type="text/css" />
    <script src="loginSpecial/js/jquery-2.1.1.min.js"></script>
 
</head>
<body>
<div class='login'>
 
    <!--<img class="MyLogo" src="loginSpecial/images/logo01.png" alt="   LOGO">-->
    <div class='login_title'>
        <span>管理员登录</span>
    </div>
    <div class='login_fields'>
        <div class='login_fields__user'>
            <div class='icon'>
 
                <img alt="" src='loginSpecial/img/user_icon_copy.png'>
            </div>
            <input name="login" placeholder='用户名' maxlength="16" class="username" type='text' autocomplete="off" value="admin"/>
            <div class='validation'>
                <img alt="" src='loginSpecial/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='loginSpecial/img/lock_icon_copy.png'>
            </div>
            <input name="pwd" class="passwordNumder" placeholder='密码' maxlength="16" type='text' autocomplete="off">
            <div class='validation'>
                <img alt="" src='loginSpecial/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='loginSpecial/img/key.png'>
            </div>
            <input name="code" placeholder='验证码' maxlength="4"  class="ValidateNum" type='text' name="ValidateNum" autocomplete="off">
            <div class='validation' style="opacity: 1; right: -5px;top: -3px;">
                <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起,您的浏览器不支持canvas,请下载最新版浏览器!</canvas>
            </div>
        </div>
        <div class='login_fields__submit'>
            <input type='button' value='登录'>
        </div>
    </div>
    <div class='success'>
    </div>
    <div class='disclaimer'>
        <p>欢迎登陆接入平台</p>
    </div>
</div>
<div class='authent'>
    <div class="loader" style="height: 60px;width: 60px;margin-left: 28px;margin-top: 40px">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <p>认证中...</p>
</div>
<div class="OverWindows"></div>
<link href="loginSpecial/layui/css/layui.css" rel="stylesheet" type="text/css" />
<!--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
<script type="text/javascript" src="loginSpecial/js/jquery-ui.min.js"></script>
<script type="text/javascript" src='loginSpecial/js/stopExecutionOnTimeout.js?t=1'></script>
<script src="loginSpecial/layui/layui.js" type="text/javascript"></script>
<script src="loginSpecial/js/Particleground.js" type="text/javascript"></script>
<script src="loginSpecial/js/Treatment.js" type="text/javascript"></script>
<script src="loginSpecial/js/jquery.mockjax.js" type="text/javascript"></script>
<script src="loginSpecial/js/controlLogin.js" type="text/javascript"></script>
</body>
</html>

06、彩色气泡登录

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <link rel="stylesheet" href="style.css">
 
    <title>彩色气泡登录页</title>
</head>
 
<body>
    <section>
        <!-- 背景颜色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <!-- 背景圆 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
            <!-- 登录框 -->
            <div class="container">
                <div class="form">
                    <h2>登录</h2>
                    <form>
                        <div class="inputBox">
                            <input type="text" placeholder="姓名">
 
                        </div>
                        <div class="inputBox">
                            <input type="password" placeholder="密码">
 
                        </div>
                        <div class="inputBox">
                            <input type="submit" value="登录">
 
                        </div>
                        <p class="forget">忘记密码?<a href="#">
                                点击这里
                            </a></p>
                        <p class="forget">没有账户?<a href="#">
                                注册
                            </a></p>
                    </form>
                </div>
            </div>
        </div>
    </section>
</body>
 
</html>

源码地址:

https://download.csdn.net/download/weixin_43615570/87884669?spm=1001.2014.3001.5503

评论获取完整

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

5个炫酷登录页面,拿去就能用(附源码) 的相关文章

  • 为什么需要重置浏览器?

    好吧 我知道这可能不是最好的标题why我们需要重置浏览器 因为浏览器有不同的默认设置 我的问题太长 无法放入标题中 如果每个人 90 的时间都需要使用重置样式表 为什么浏览器需要设置默认样式 无论如何我们都会删除它们 对吗 因为某些规则默认
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 如何在背景剪辑中包含文本装饰:文本;影响?

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4
  • Overflow:auto 导致子 DIV 的绝对元素消失

    我有一个 div A 我在其中设置了overflow auto 现在在该 div 内 我有两个 div 父 div B 设置为position relative和子 div C 是position absolute 现在的问题是 设置ove
  • 如何更改chart.js中的标签颜色?

    我有一个像这样定义的饼图 var myChart new Chart ctx type doughnut data labels data labels datasets data data values backgroundColor r
  • 水平滚动条仅出现在页面底部

    我有一个具有以下 HTML 结构的页面 div class wrapper div The wrapper被设置为min width 1100px至于原因我就不多说了 因此 当浏览器大小调整为小于 1100px 时 我希望出现水平滚动条 我
  • 双弧形

    我目前正在尝试生成 波浪形幽灵底部 形状 该形状包含两条双曲线 虽然底部的部分这个图片 http images clipartpanda com ghost clip art castle ghost clipart1 jpg我认为以更好的
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • 如何使 jQuery 向上动画

    我有一些 jquery 运行得相当好 但是当我将鼠标悬停在有问题的元素上时 底部向下扩展 这并不意外 但不是所需的效果 我希望元素的底部保持静止 而元素的顶部向上扩展 如果您想查看我目前拥有的内容 您可以导航至http demo ivann
  • span 和 iframe 正文中的宽度(以像素为单位)

    我需要知道 a 的宽度 nbsp 以像素为单位 以及是否取决于字体大小 另外 页面中不同元素的情况是否有所不同 还有 就是 nbsp 与常规不同 目的 nbsp 不间断空格 位于正常空格之上是为了防止单词之间出现换行 您可以使用多个 nbs
  • 如何使用 Materialise 创建具有居中对齐链接的导航栏?

    我正在尝试使用 Materialise 构建一个顶部有导航栏的 1 页垂直滚动网站 现在 Materialize 仅具有用于向左或向右对齐链接的类 徽标可以居中对齐 但不能居中对齐链接本身 我一直在向 UL 和包装 div 添加中心对齐和中
  • 如何更改单选按钮与其文本之间的间距?

    我有以下 HTML
  • 将 DIV 堆叠在一起?

    是否可以堆叠多个 DIV 例如 div div div div div div div div div div 那么所有这些内部 DIV 都具有相同的 X 和 Y 位置吗 默认情况下 它们都在彼此下方 将 Y 位置增加了上一个 DIV 的高
  • :目标选择器不适用于选项标签

    我试图在这里帮助一位 StackOverflow 成员 我发现 CSS target选择器不适用于选项标签 我创建了一个示例来说明使用w3schools 教程 http www w3schools com cssref tryit asp
  • 如何防止 CSS 或 jQuery 中单词和标点符号之间的换行

    我在一个段落中有一些文字 我的问题是 当标点符号位于单词末尾时 有时可以换行到下一行 像这样 This is the text This is a new line 我可以用 CSS 或 jQuery 解决这个问题吗 如果您不在单词和标点符

随机推荐

  • C++ New对象和直接声明对象的区别

    1 new出来的对象需要使用指针接收 而直接声明的不用 例如 A a new A 与A a 2 new出来的对象是直接使用堆空间 而局部声明一个对象是放在栈中 3 new出来的对象类似于申请空间 因此需要delete销毁 而直接声明的对象则
  • 动态路由权限,按钮的权限,菜单权限分别是怎么实现的

    首先什么是前端权限控制 就是当用户登录之后 根据不用用户拥有的权限动态添加 addRoutes 用户能访问的路由页面和能看到的菜单页面 v for 动态路由权限 1 本质就是利用addRoutes这个api来实现动态添加路由权限 然后还可以
  • robotstudio喷涂组件paintapplicator没有显色效果

    因为part这里只能选择仿真之前已经存在的部件 若是像仿真后用source组件生成的新物体 就选择不了 即使你使用传感器 让传感器将检测到的物体传给part 也一样没有喷涂的颜色效果 如果一定要实现 可以参照这个视频 https www b
  • 我的机器学习--线性回归

    1 最小二乘法 上述方法可以直接得到线性回归方程 import numpy as np import matplotlib pyplot as plt x 2 np random rand 100 1 y 4 3 x np random r
  • C语言指针转换为intptr_t类型

    随笔 155 文章 2 评论 342 C语言指针转换为intptr t类型 1 前言 今天在看代码时 发现将之一个指针赋值给一个intptr t类型的变量 由于之前没有见过intptr t这样数据类型 凭感觉认为intptr t是int类型
  • 一个五位数判断他是否为回文数。

    一个五位数判断他是否是回文数 代码 num int input munber n flag True while True if 10000 lt num lt 100000 print input number num break els
  • 腾讯三面被问到有没有参加过CTF?我反手就是一套军体拳打得面试官哑口无言!

    目录 前言 正文 什么是CTF 什么是PWN 为什么要学CTF CTF竞赛模式 CTF各大题型简介 学之前的思考 分析赛题情况 常规做法 CTF比赛需要的知识储备 CTF比赛的神器 恶补基础知识 信息安全专业知识推荐图书 前言 这是一场紧张
  • Typora字体颜色修改

    Typora字体颜色修改 typora中不能直接修改字体颜色 但有三种方法可以实现修改Typora中颜色 第一种 安装AutoHotKey 较简单 安装AutoHotKey windows系统快捷键设置软件 从而通过设置快捷键来达到修改字体
  • macbook brew install 经常遇见 No such file or directory @ rb_sysopen

    安装php brew install php 在执行过程中经常报错 比如以下 gt Installing php dependency openldap gt Pouring openldap 2 5 8 arm64 monterey bo
  • Docker介绍

    目录 docker定义 docker解决了什么问题 docker技术边界 docker给我们带来了哪些改变 docker和虚拟机的区别 docker基本架构 基本架构图 RootFs Linux Namespace 进程命名空间 查看元祖进
  • 动态规划快速入门

    更多内容 欢迎关注微信公众号 全菜工程师小辉 公众号回复关键词 领取免费学习资料 动态规划算法一直是面试手撕算法中比较有挑战的一种类型 很多的分配问题或者调度问题实际上都可能用动态规划进行解决 当然 如果问题的规模较大 有时候会抽象模型使用
  • 【CV】第 14 章:用最少的数据点训练

    大家好 我是Sonhhxg 柒 希望你看完之后 能对你有所帮助 不足请指正 共同学习交流 个人主页 Sonhhxg 柒的博客 CSDN博客 欢迎各位 点赞 收藏 留言 系列专栏 机器学习 ML 自然语言处理 NLP 深度学习 DL fore
  • 情人节-动态爱心背景(html5+css+js)

    一 效果图 二 源代码
  • GDAL对TIF创建内建金字塔一个问题

    gdalwarp输出tif图像的时候 默认如果没有使用BIGTIFF YES选项 则会根据输出影像的大小进行判断 低于4G则不适用bigtiff格式 对于非bigtiff图像 如果这时候使用gdaladdo创建金字塔 内建模式 如果出现了文
  • SQL——游标

    非原创 东拼西凑来的 游标 cursor 是一个存储在MySQL服务器上的数据库查询 它不是一条SELECT语句 而是被该语句检索出来的结果集 在存储了游标之后 应用程序可以根据需要滚动或浏览其中的数据 游标主要用于交互式应用 其中用户需要
  • 业务安全及实战案例

    业务安全 关于漏洞 注入 业务逻辑 信息泄露 A04 2021 Insecure Design 在线靶场PortSwigger 1 概述 1 1 业务安全现状 1 1 1 业务逻辑漏洞 近年来 随着信息化技术的迅速发展和全球一体化进程的不断
  • php读写excel文件

    1 引入包 有不少提供读写excel文件的包 这里选择比较常用的一个 加到自己的项目里就好了 phpoffice phpspreadsheet 1 8 2 2 读取文件
  • Android中的USB中的UsbAccessory和UsbDevice的区别

    转载自 http www crifan com android usb usbaccessory vs usbdevice utm source tuicool utm medium referral UsbAccessory和UsbDev
  • MySQL更新表的记录详解

    目录 前言 前言 一 更新数据记录 1 特定数据记录 2 所有数据记录 总结 前言 更新数据记录是数据操作中常见的操作 可以更新表中已经存在数据记录中的值 在MySQL中可以通过UPDATE语句来实现更新数据记录 该SQL语句可以通过如下几
  • 5个炫酷登录页面,拿去就能用(附源码)

    5个炫酷登录页面 拿去就能用 附源码 登录页面 觉得显示效果很好 借鉴其他博主的 喜欢的可以收藏关注 不商用 只为学习传播 目录 1 炫酷星空登录 2 动态云层登录 3 深海灯光水母登录 4 炫酷蛛网登录 5 彩色气泡登录 1 炫酷星空登录