五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
完整源码详见
微信公众号：创享日记
对话框发送：登录页面
获取HTML+CSS+js等源码文件
一、彩虹气泡登录页面
效果图：
HTML源码：
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>
二、动态云层
效果图：
HTML源码：
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();
}
});
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">
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,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAABJRU5ErkJggg==');
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>
三、深海灯光水母
效果图：
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">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">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">i> 登录
button>
div>
<div class="beg-clear">div>
div>
form>
div>
<footer>
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 = $('').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;
}
},
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;
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);
},
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>
四、炫酷星空
效果图：
HTML源码等详见下载
五、炫酷蜘蛛网
效果图：
HTML源码等详见下载