前言

这一讲，给大家添加登录页面

实现

添加Login的Index视图

@{

    Layout = null;

}

<!DOCTYPE html>

<html class="loginHtml">

<head>

    <meta charset="utf-8">

    <title>登录--BYCMS后台管理系统</title>

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="format-detection" content="telephone=no">

    <link rel="icon" href="~/Content/images/favicon.ico">

    <link rel="stylesheet" href="~/Content/layui/css/layui.css" media="all" />

    <link rel="stylesheet" href="~/Content/css/public.css" media="all" />

</head>

<body class="loginBody">

    <iframe src="/Login/Bg01" style="width: 100%;height: 100%" frameborder="0"></iframe>

    <form class="layui-form">

        <div class="login_face"><img src="~/Content/images/face.jpg" class="userAvatar"></div>

        <div class="layui-form-item input-item">

            <label for="userName">用户名</label>

            <input type="text" placeholder="请输入用户名" autocomplete="off" id="userName" class="layui-input" lay-verify="required">

        </div>

        <div class="layui-form-item input-item">

            <label for="password">密码</label>

            <input type="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input" lay-verify="required">

        </div>

        <div class="layui-form-item input-item" id="imgCode">

            <label for="code">验证码</label>

            <input type="text" placeholder="请输入验证码" autocomplete="off" id="code" class="layui-input">

            <img src="~/Content/images/code.jpg">

        </div>

        <div class="layui-form-item">

            <button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button>

        </div>

    </form>

    <script type="text/javascript" src="~/Content/layui/layui.js"></script>

    <script type="text/javascript" src="~/Content/js/login/login.js"></script>

    <script type="text/javascript" src="~/Content/js/cache.js"></script>

</body>

</html>

添加Login的Bg01视图

@{

Layout = null;

}

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>bg01</title>

<style>

body {

margin: 0;

padding: 0;

background: black;

overflow: hidden;

}

</style>

<script src="http://cdn.bootcss.com/three.js/r78/three.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>

</head>

<body>

<script>

var isMouseDown = false;

var emptySlot = "emptySlot", planeTop = "planeTop", planeBottom = "planeBottom";

var camera, scene, renderer;

var mouse = { x: 0, y: 0 };

var camPos = { x: 0, y: 0, z: 10 };

var sw = window.innerWidth, sh = window.innerHeight;

var cols = 20;

var rows = 16;

var gap = 20;

var size = {

width: 100,

height: 30,

depth: 150,

}

var planeOffset = 250;

var allRowsDepth = rows * (size.depth + gap);

var allColsWidth = cols * (size.depth + gap);

var speedNormal = 4;

var speedFast = 34;

var speed = speedNormal;

var boxes = {

planeBottom: [],

planeTop: []

};

var boxes1d = [];

function num(min, max) { return Math.random() * (max - min) + min; }

function draw(props) {

var colours = {

slow: {

r: num(0, 0.2),

g: num(0.5, 0.9),

b: num(0.3, 0.7)

},

fast: {

r: num(0.9, 1.0),

g: num(0.1, 0.7),

b: num(0.2, 0.5)

}

}

var uniforms = {

r: { type: "f", value: colours.slow.r },

g: { type: "f", value: colours.slow.g },

b: { type: "f", value: colours.slow.b },

distanceX: { type: "f", value: 1.0 },

distanceZ: { type: "f", value: 1.0 },

pulse: { type: "f", value: 0 },

speed: { type: "f", value: speed },

};

var material = new THREE.ShaderMaterial({

uniforms: uniforms,

vertexShader: vertexShader,

fragmentShader: fragmentShader

});

var geometry = new THREE.BoxGeometry(props.width, props.height, props.depth);

var object = new THREE.Mesh(geometry, material);

object.colours = colours;

return object;

}

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(100, sw / sh, 1, 10000);

scene.add(camera);

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(sw, sh);

for (var j = 0, jl = rows; j < jl; j++) {

boxes.planeBottom[j] = [];

boxes.planeTop[j] = [];

for (var i = 0, il = cols; i < il; i++) {

boxes.planeBottom[j][i] = emptySlot;

boxes.planeTop[j][i] = emptySlot;

};

};

function createBox() {

var xi = Math.floor(Math.random() * cols),

xai = xi;

var yi = Math.random() > 0.5 ? 1 : -1,

yai = yi === -1 ? planeBottom : planeTop;

var zi = Math.floor(Math.random() * rows),

zai = zi;

var x = (xi - cols / 2) * (size.width + gap);

var y = yi * planeOffset;

var z = zi * (size.depth + gap);

if (boxes[yai][zai][xai] === emptySlot) {

var box = draw(size);

box.position.y = y;

box.isWarping = false;

box.offset = {

x: x,

z: 0

};

box.posZ = z;

boxes[yai][zai][xai] = box;

boxes1d.push(box);

scene.add(box)

}

var dzurl = window.location.href.substr(0, 19);

var dzurl2 = window.location.href.substr(0, 4);

}

for (var i = 0, il = rows * cols; i < il; i++) {

createBox();

};

document.body.appendChild(renderer.domElement);

function listen(eventNames, callback) {

for (var i = 0; i < eventNames.length; i++) {

window.addEventListener(eventNames[i], callback);

}

}

listen(["resize"], function (e) {

sw = window.innerWidth;

sh = window.innerHeight

camera.aspect = sw / sh;

camera.updateProjectionMatrix();

renderer.setSize(sw, sh);

});

listen(["mousedown", "touchstart"], function (e) {

e.preventDefault();

isMouseDown = true;

});

listen(["mousemove", "touchmove"], function (e) {

e.preventDefault();

if (e.changedTouches && e.changedTouches[0]) e = e.changedTouches[0];

mouse.x = (e.clientX / sw) * 2 - 1;

mouse.y = -(e.clientY / sh) * 2 + 1;

});

listen(["mouseup", "touchend"], function (e) {

e.preventDefault();

isMouseDown = false;

});

render(0);

}

function move(x, y, z) {

var box = boxes[y][z][x];

if (box !== emptySlot) {

box.position.x = box.offset.x;

box.position.z = box.offset.z + box.posZ;

if (box.position.z > 0) {

box.posZ -= allRowsDepth;

}

// return;

// if (isMouseDown) return;

if (!box.isWarping && Math.random() > 0.999) {

var dir = Math.floor(Math.random() * 5), xn = x, zn = z, yn = y, yi = 0, xo = 0, zo = 0;

switch (dir) {

case 0: xn++; xo = 1; break;

case 1: xn--; xo = -1; break;

case 2: zn++; zo = 1; break;

case 3: zn--; zo = -1; break;

case 4:

yn = (y === planeTop) ? planeBottom : planeTop;

yi = (y === planeTop) ? -1 : 1;

break;

}

if (boxes[yn][zn] && boxes[yn][zn][xn] === emptySlot) {

boxes[y][z][x] = emptySlot;

box.isWarping = true;

boxes[yn][zn][xn] = box;

// con.log( box.offset.x, box.offset.z);

if (dir === 4) { // slide vertically

TweenMax.to(box.position, 0.5, {

y: yi * planeOffset

});

} else { // slide horizontally

TweenMax.to(box.offset, 0.5, {

x: box.offset.x + xo * (size.width + gap),

z: box.offset.z + zo * (size.depth + gap),

});

}

TweenMax.to(box.offset, 0.6, {

onComplete: function () {

box.isWarping = false;

}

});

}

}

}

}

function render(time) {

speed -= (speed - (isMouseDown ? speedFast : speedNormal)) * 0.05;

var box;

for (var b = 0, bl = boxes1d.length; b < bl; b++) {

box = boxes1d[b];

box.posZ += speed;

// normalized z distance from camera

var distanceZ = 1 - ((allRowsDepth - box.posZ) / (allRowsDepth) - 1);

box.material.uniforms.distanceZ.value = distanceZ;

// normalized x distance from camera (centre)

var distanceX = 1 - (Math.abs(box.position.x)) / (allColsWidth / 3);

box.material.uniforms.distanceX.value = distanceX;

var colour = isMouseDown ? box.colours.fast : box.colours.slow;

box.material.uniforms.r.value -= (box.material.uniforms.r.value - colour.r) * 0.1;

box.material.uniforms.g.value -= (box.material.uniforms.g.value - colour.g) * 0.1;

box.material.uniforms.b.value -= (box.material.uniforms.b.value - colour.b) * 0.1;

// normalized speed

var currentSpeed = (speed - speedNormal) / (speedFast - speedNormal)

box.material.uniforms.speed.value = currentSpeed;

// pulses more with more speed... of course!

if (Math.random() > (0.99995 - currentSpeed * 0.005)) {

box.material.uniforms.pulse.value = 1;

}

box.material.uniforms.pulse.value -= box.material.uniforms.pulse.value * 0.1 / (currentSpeed + 1);

// if (b ==13) con.log(box.material.uniforms.speed.value);

}

for (var j = 0, jl = rows; j < jl; j++) { // iterate through rows: z

for (var i = 0, il = cols; i < il; i++) { // iterate throw cols: x

move(i, planeBottom, j);

move(i, planeTop, j);

};

};

camPos.x -= (camPos.x - mouse.x * 400) * 0.02;

camPos.y -= (camPos.y - mouse.y * 150) * 0.05;

camPos.z = -100;

camera.position.set(camPos.x, camPos.y, camPos.z);

// camera.lookAt( scene.position );

// camera.rotation.z = time * 0.0001;

camera.rotation.y = camPos.x / -1000;

camera.rotation.x = camPos.y / 1000;

// camera.rotation.z = camPos.x / -2000;

camera.rotation.z = (camPos.x - mouse.x * 400) / 2000;

renderer.render(scene, camera);

// if (time < 800)

requestAnimationFrame(render);

}

var vertexShader = [

"varying vec2 vUv;",

"void main()",

"{",

" vUv = uv;",

" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",

" gl_Position = projectionMatrix * mvPosition;",

"}"].join("");

var fragmentShader = [

"uniform float r;",

"uniform float g;",

"uniform float b;",

"uniform float distanceZ;",

"uniform float distanceX;",

"uniform float pulse;",

"uniform float speed;",

"varying vec2 vUv;",

// "float checkerRows = 8.0;",

// "float checkerCols = 16.0;",

"void main( void ) {",

" vec2 position = abs(-1.0 + 2.0 * vUv);",

" float edging = abs((pow(position.y, 5.0) + pow(position.x, 5.0)) / 2.0);",

" float perc = (0.2 * pow(speed + 1.0, 2.0) + edging * 0.8) * distanceZ * distanceX;",

// " float perc = distanceX * distanceZ;",

// " vec2 checkPosition = vUv;",

// " float checkerX = ceil(mod(checkPosition.x, 1.0 / checkerCols) - 1.0 / checkerCols / 2.0);",

// " float checkerY = ceil(mod(checkPosition.y, 1.0 / checkerRows) - 1.0 / checkerRows / 2.0);",

// " float checker = ceil(checkerX * checkerY);",

// " float r = checker;",

// " float g = checker;",

// " float b = checker;",

// " float perc = 1.0;",

" float red = r * perc + pulse;",

" float green = g * perc + pulse;",

" float blue = b * perc + pulse;",

" gl_FragColor = vec4(red, green, blue, 1.0);",

"}"].join("");

//console.log(THREE, TweenMax, planeTop, planeBottom);

init();

</script>

</body>

</html>

运行效果图

ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（4）- 漂亮的登录界面的更多相关文章

ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（1）
文章转自:http://www.xuboyi.com/298.html 前言网站运营有一段时间了,记录的内容都是杂七杂八的,思前想后,决定给大家分享一套ASP.Net的系列教程.手把手的做一套通用后 ...
ASP.NET MVC5 + EF6 + LayUI实战教程，通用后台管理系统框架（3）
前言本节将我们自己的CSS样式替换系统自带的开始搭建将脚本文件夹删掉,将内容文件夹里的内容删掉,将我们自己的CSS样式文件,全部复制到内容里边新建家庭控制器给家庭控制器添加索引视图指数代码 ...
ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（7）- EF增删改查
前言上一节创建了实体数据库,这次我们来看看怎么操作这个实体代码实现新建一个UserInfoController的控制器:不需要写什么代码,系统自动生成Index方法: 创建IDAL,DAL,IB ...
ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（2）
前言本节先给大家搭建UI部分,让大家能看到点东西,就好像所有编程书里,开始都是一个Hello World一样开始搭建首先建立空白解决方案,我们命名为BYCMS 然后添加新项目BYCMS 我习惯用 ...
ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（6）- 创建数据库
前言其实网站就是一座连接用户和数据库的梁桥,数据库通过网站,将信息以不同的方式,展现给客户,客户通过网站,对数据库进行各种操作下面,我们用一个例子,给大家展示下基本的增删改查操作创建数据库创建 ...
ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（5）- 创建项目结构
前言关于理论知识,我的表达能力有限,知识水平有限,就不过多的讲解编程工作中的专用术语了,大家写的代码多了,自然就懂了前几节课,我们看到了后台的主页面,以及一个自认为比较漂亮的登录界面,算是编程套路 ...
开源项目之ASP.NET Core + Vue.js 的前后端分离的通用后台管理系统框架
年前看了这个开源项目感觉很不错,这个小项目对于传统的.net 开发人员,想做技术提升是一个很不错的参考案例. 开源项目演示地址:https://dnczeus.codedefault.com/logi ...
ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用
文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html 上一节:ASP.NET MVC ...
MVC5 + EF6 入门完整教程二
从前端的UI开始 MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分. ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,Vie ...

随机推荐

CF每日一题系列 —— 415A
http://codeforces.com/problemset/page/7?order=BY_SOLVED_DESC 从5000以内选的,emmm还是比较水的哈时间还是有的,所以万事万物贵在坚持 ...
iOS 5 故事板进阶(1)
译自<iOS 5 by tutorials> 在上一章,你已经学习了故事板的基本用法.包括如何向故事板中添加 View Controller,通过 segues 切换 View Contr ...
shell中十种实现自加的方法
shell中十种实现自加的方法 let "n = $n + 1" : $((n = $n + )) ((n = n+)) n=$(($n + )) : $[ n = $n + ] ...
iOS证书说明和发布
1.首先通过钥匙串访问——证书助理——从证书颁发机构请求证书——填写证书信息(邮箱,常用名称,存储到磁盘)——存储为(自定义名称.certSigningReuqest,简称CSR文件,只是为了提交到苹 ...
C#后台代码获取程序集资源文件
资源会被打包在程序集内部. 选择这种生成方式后,该资源文件会被嵌入到该应用的程序集中,就是说打开生成的应用程序目录是看不到这个文件的. 可以用相对于当前的XAML文件的相对Uri访问,<Imag ...
DS-博客作业03--栈和队列
1.本周学习总结第三章主要介绍栈和队列的基本概念,存储结构,基本运算算法设计和应用实例.从组成元素的逻辑关系来看,栈和队列都属于线性结构.栈和队列与线性表的不同之处就在于他们的相关运算具有一些特殊性 ...
Bs4 BeautifulSoup取值
原文网址:https://blog.csdn.net/u010244522/article/details/79627073 从网页获取HTML数据后,获取对应标签.属性的值取值方法主要有以下几种: ...
MariaDB 存储过程与函数(10)
MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...
jQuery基础（2）
一.jQuery的属性操作 jQuery的属性操作分为四部分: html标签属性操作:是对html文档中的标签属性进行读取,设置和移除操作.比如attr().removeAttr(): DOM属性操作 ...
Linux上安装java JDK
yum方式 1.查看yum中的各个版本 yum -y list java* 2.选择一个版本安装(如1.7) yum -y install java-1.7.0-openjdk* 3.安装完成后可查看 ...

ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（4）- 漂亮的登录界面

前言

实现

ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（4）- 漂亮的登录界面的更多相关文章

随机推荐

热门专题