前言

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

实现

添加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 ...

随机推荐

kettle学习
数据etl工具,主要用做数据采集和清洗待续...
Spring Security ——AuthenticationProvider
AuthenticationProvider 目录 1.1 用户信息从数据库获取 1.1.1 使用jdbc-user-service获取 1.1.2 直接使用JdbcDaoImpl ...
初识Identity并添加身份验证管理页面
目录初识Identity并添加身份验证管理页面前言什么是ASP.NET Core Identity 创建带有身份验证的WebApp 尝试运行检查解决方案中的项目文件发现问题原因解决问题 ...
ModelValidator基于元数据的验证
ModelValidator主要是应用在ModelMetadata元数据的类型上或类型属性上.它是验证的基础类型,所有的ModelValidatorProviders.DataAnnotationVa ...
Redis .Net
一.Redis简介 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,和Memcached类似,它支持存储的value类型相对更多,包括 ...
【转】 js数组 Array 交集并集差集去重
原文:http://blog.csdn.net/ma_jiang/article/details/52672762 最劲项目需要用到js数组去重和交集的一些运算,我的数组元素个数可能到达1000以上, ...
[Objective-C语言教程]字符串（16）
Objective-C编程语言中的字符串使用NSString表示,其子类NSMutableString提供了几种创建字符串对象的方法. 创建字符串对象的最简单方法是使用Objective-C的标识符: ...
Windows安装python3.x后，pip list警告！DEPRECATION: The default format will switch to columns in the future.
前言(凑字数专用) 这个警告虽然不影响你的正常使用,但是每次都好几行红色警告,总是给人一种怪怪的感觉(当然不是FBI的警告了……),所以咱们还是把他解决掉~ 网上好多解决办法都是Ubuntu的解决办法 ...
python　字符串中‘ｒ’前缀
在Python中,如果字符串的前面有r/R前缀,那么,就会禁用转义符\的功能: >>>path = r'C:\new\text.dat'>>>pah'C:\\new ...
Vue + Bootstrap 制作炫酷个人简历（一）
最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下. 由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看. emmm等我更新完会在最后附上成品. 现在开始! 首先配置 ...

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

前言

实现

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

随机推荐

热门专题