登录页面

来源：互联网发布：软件企业所得税编辑：程序博客网时间：2024/04/29 15:42

动态网页背景+登录页面

![这里写图片描述](http://img.blog.csdn.net/20170926160422081?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQm94emhhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)**注意html文件代码如下**<!DOCTYPE html><html ><head><meta charset="UTF-8"><title></title><style>#move_div{                border: 1px solid;                width: 350px;                height: 400px;                position: fixed;                display: none;                background: linear-gradient( #15CEBF,gray);                 cursor: move;            }            .T{                margin-top: 30px;                text-align: center;            }            .B{                margin-top: 40px;                text-align: center;                margin-left: 12px;            }            .wenzi{                border: 1px solid;                width: 85%;                height: 30px;                text-align: center;                margin-top: 130px;                margin-left: 25px;                border-radius: 7px;            }            .zi{                display: block;                margin-top: 5px;                cursor: pointer;            }            a{                position: absolute;            }</style></head><body><!--<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">--><div class="aqian">           <a href="javascript:logtion();">登录</a></div> <div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()">        <input  id="Button1"  type="button" value="Close" style="background-color: transparent; border: 1px;" onclick="closes()">        <!--<button  style="background-color: transparent;"/>-->        <!--<input id="Button1" type="button" value="close" style=" FILTER: alpha(opacity=0);"/>-->     <!--<input type="text" id="user" style="background-color: #15CEBF;border: 1px; border-color: red;" />-->     <br />     <div class="T">        <font>用户名:</font>             <input style="background-color: #15CEBF;"/>     </div>     <div class="B">            <font>密码:</font>             <input type="password" style="background-color: #15CEBF;"/>      </div>      <div class="wenzi">        <font class="zi" size="4">登录</font>      </div>      </div></div></body><script src='js/pixi.js'></script><script src='js/TweenMax.min.js'></script><script src='js/ColorPropsPlugin.min.js'></script><script src="js/index.js"></script><script type="text/javascript" src="gsd.js" ></script></html>**注意js文件代码如下文件名叫gsd.js**

    /*         * 分析：         * 获取鼠标实时移动的坐标；m_move_x,m_move_y         * 鼠标按下时的坐标；m_down_x,m_down_y         * div的坐标；dx,dy         * 鼠标按下时，鼠标与div的偏移量；md_x,md_y         * div的新坐标；ndx,ndy         */        var isDown = false;//记录鼠标状态        var move_div ;//要操作的div对象        var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;        //鼠标按下        function down(){            move_div = document.getElementById("move_div");            isDown = true;            //获取鼠标按下时坐标            m_down_x = event.pageX;            m_down_y = event.pageY;            //获取div坐标            dx = move_div.offsetLeft;            dy = move_div.offsetTop;            //获取鼠标与div偏移量            md_x = m_down_x - dx;            md_y = m_down_y - dy;        }        //鼠标移动        function move(){            move_div = document.getElementById("move_div");            //实时更新div的坐标            dx = move_div.offsetLeft;            dy = move_div.offsetTop;            //获取鼠标移动实时坐标            m_move_x = event.pageX;            m_move_y = event.pageY;            //鼠标按下时移动才触发            if(isDown){                //获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量                ndx = m_move_x - md_x;                ndy = m_move_y - md_y;                //把新div坐标值赋给div对象                move_div.style.left = ndx+"px";                move_div.style.top = ndy+"px";            }        }        //鼠标释放        function up(){            isDown = false;        }        function logtion(){            move_div = document.getElementById("move_div");            move_div.style.display="block";        }        function closes(){        move_div.style.display="none";        }

**注意js文件代码如下文件名叫ColorPropsPlugin.min.js**

**注意js文件代码如下文件名叫index.js**

var width = window.innerWidth;var height = window.innerHeight;// create an new instance of a pixi stagevar stage = new PIXI.Stage(0x0, true);// create a renderer instancevar renderer = PIXI.autoDetectRenderer(width, height);// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);// smoke shadervar uniforms = {};uniforms.resolution = {  type: '2f',  value: {    x: width,    y: height  }};uniforms.alpha = {  type: '1f',  value: 1.0};uniforms.shift = {  type: '1f',  value: 1.6};uniforms.time = {  type: '1f',  value: 0};uniforms.speed = {  type: '2f',  value: {    x: 0.7,    y: 0.4  }};var fragmentSrc = [  "precision mediump float;",  "uniform vec2      resolution;",  "uniform float     time;",  "uniform float     alpha;",  "uniform vec2      speed;",  "uniform float     shift;",  "float rand(vec2 n) {",    "return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);",  "}",  "float noise(vec2 n) {",    "const vec2 d = vec2(0.0, 1.0);",    "vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));",    "return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);",  "}",  "float fbm(vec2 n) {",    "float total = 0.0, amplitude = 1.0;",    "for (int i = 0; i < 4; i++) {",      "total += noise(n) * amplitude;",      "n += n;",      "amplitude *= 0.5;",    "}",    "return total;",  "}",  "void main() {",    "const vec3 c1 = vec3(126.0/255.0, 0.0/255.0, 97.0/255.0);",    "const vec3 c2 = vec3(173.0/255.0, 0.0/255.0, 161.4/255.0);",    "const vec3 c3 = vec3(0.2, 0.0, 0.0);",    "const vec3 c4 = vec3(164.0/255.0, 1.0/255.0, 214.4/255.0);",    "const vec3 c5 = vec3(0.1);",    "const vec3 c6 = vec3(0.9);",    "vec2 p = gl_FragCoord.xy * 8.0 / resolution.xx;",    "float q = fbm(p - time * 0.1);",    "vec2 r = vec2(fbm(p + q + time * speed.x - p.x - p.y), fbm(p + q - time * speed.y));",    "vec3 c = mix(c1, c2, fbm(p + r)) + mix(c3, c4, r.x) - mix(c5, c6, r.y);",    "float grad = gl_FragCoord.y / resolution.y;",    "gl_FragColor = vec4(c * cos(shift * gl_FragCoord.y / resolution.y), 1.0);",    "gl_FragColor.xyz *= 1.0-grad;",  "}"];var coolFilter = new PIXI.AbstractFilter(fragmentSrc, uniforms);var bg = PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/examples/25/test_BG.jpg");bg.width = width;bg.height = height;bg.shader = coolFilter;stage.addChild(bg);var logo = PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/examples/25/pixiJsV2.png");logo.x = width / 2;logo.y = height / 2;logo.anchor.set(0.5);logo.blendMode = PIXI.blendModes.ADD;stage.addChild(logo);var count = 0;function animate() {  count += 0.01;  coolFilter.uniforms.time.value = count;  coolFilter.syncUniforms();  renderer.render(stage);  requestAnimFrame(animate);}requestAnimFrame(animate);

注意js文件代码如下文件名叫.js

/**
* @license
* pixi.js - v2.0.0
* Copyright (c) 2012-2014, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2014-10-19
*
* pixi.js is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(){var a=this,b=b||{};b.WEBGL_RENDERER=0,b.CANVAS_RENDERER=1,b.VERSION=”v2.0.0”,b.blendModes={NORMAL:0,ADD:1,MULTIPLY:2,SCREEN:3,OVERLAY:4,DARKEN:5,LIGHTEN:6,COLOR_DODGE:7,COLOR_BURN:8,HARD_LIGHT:9,SOFT_LIGHT:10,DIFFERENCE:11,EXCLUSION:12,HUE:13,SATURATION:14,COLOR:15,LUMINOSITY:16},b.scaleModes={DEFAULT:0,LINEAR:0,NEAREST:1},b._UID=0,”undefined”!=typeof Float32Array?(b.Float32Array=Float32Array,b.Uint16Array=Uint16Array):(b.Float32Array=Array,b.Uint16Array=Array),b.INTERACTION_FREQUENCY=30,b.AUTO_PREVENT_DEFAULT=!0,b.PI_2=2*Math.PI,b.RAD_TO_DEG=180/Math.PI,b.DEG_TO_RAD=Math.PI/180,b.RETINA_PREFIX=”@2x”,b.dontSayHello=!1,b.defaultRenderOptions={view:null,transparent:!1,antialias:!1,preserveDrawingBuffer:!1,resolution:1,clearBeforeRender:!0},b.sayHello=function(a){if(!b.dontSayHello){if(navigator.userAgent.toLowerCase().indexOf(“chrome”)>-1){var c=[“%c %c %c Pixi.js “+b.VERSION+” - “+a+” %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ “,”background: #ff66a5”,”background: #ff66a5”,”color: #ff66a5; background: #030307;”,”background: #ff66a5”,”background: #ffc3dc”,”background: #ff66a5”,”color: #ff2424; background: #fff”,”color: #ff2424; background: #fff”,”color: #ff2424; background: #fff”];console.log.apply(console,c)}else window.console&&console.log(“Pixi.js “+b.VERSION+” - http://www.pixijs.com/“);b.dontSayHello=!0}},b.Point=function(a,b){this.x=a||0,this.y=b||0},b.Point.prototype.clone=function(){return new b.Point(this.x,this.y)},b.Point.prototype.set=function(a,b){this.x=a||0,this.y=b||(0!==b?this.x:0)},b.Point.prototype.constructor=b.Point,b.Rectangle=function(a,b,c,d){this.x=a||0,this.y=b||0,this.width=c||0,this.height=d||0},b.Rectangle.prototype.clone=function(){return new b.Rectangle(this.x,this.y,this.width,this.height)},b.Rectangle.prototype.contains=function(a,b){if(this.width<=0||this.height<=0)return!1;var c=this.x;if(a>=c&&a<=c+this.width){var d=this.y;if(b>=d&&b<=d+this.height)return!0}return!1},b.Rectangle.prototype.constructor=b.Rectangle,b.EmptyRectangle=new b.Rectangle(0,0,0,0),b.Polygon=function(a){if(a instanceof Array||(a=Array.prototype.slice.call(arguments)),a[0]instanceof b.Point){for(var c=[],d=0,e=a.length;e>d;d++)c.push(a[d].x,a[d].y);a=c}this.closed=!0,this.points=a},b.Polygon.prototype.clone=function(){var a=this.points.slice();return new b.Polygon(a)},b.Polygon.prototype.contains=function(a,b){for(var c=!1,d=this.points.length/2,e=0,f=d-1;d>e;f=e++){var g=this.points[2*e],h=this.points[2*e+1],i=this.points[2*f],j=this.points[2*f+1],k=h>b!=j>b&&(i-g)(b-h)/(j-h)+g>a;k&&(c=!c)}return c},b.Polygon.prototype.constructor=b.Polygon,b.Circle=function(a,b,c){this.x=a||0,this.y=b||0,this.radius=c||0},b.Circle.prototype.clone=function(){return new b.Circle(this.x,this.y,this.radius)},b.Circle.prototype.contains=function(a,b){if(this.radius<=0)return!1;var c=this.x-a,d=this.y-b,e=this.radius*this.radius;return c=c,d*=d,e>=c+d},b.Circle.prototype.getBounds=function(){return new b.Rectangle(this.x-this.radius,this.y-this.radius,2*this.radius,2*this.radius)},b.Circle.prototype.constructor=b.Circle,b.Ellipse=function(a,b,c,d){this.x=a||0,this.y=b||0,this.width=c||0,this.height=d||0},b.Ellipse.prototype.clone=function(){return new b.Ellipse(this.x,this.y,this.width,this.height)},b.Ellipse.prototype.contains=function(a,b){if(this.width<=0||this.height<=0)return!1;var c=(a-this.x)/this.width,d=(b-this.y)/this.height;return c*=c,d*=d,1>=c+d},b.Ellipse.prototype.getBounds=function(){return new b.Rectangle(this.x-this.width,this.y-this.height,this.width,this.height)},b.Ellipse.prototype.constructor=b.Ellipse,b.Matrix=function(){this.a=1,this.b=0,this.c=0,this.d=1,this.tx=0,this.ty=0},b.Matrix.prototype.fromArray=function(a){this.a=a[0],this.b=a[1],this.c=a[3],this.d=a[4],this.tx=a[2],this.ty=a[5]},b.Matrix.prototype.toArray=function(a){this.array||(this.array=new b.Float32Array(9));var c=this.array;return a?(c[0]=this.a,c[1]=this.b,c[2]=0,c[3]=this.c,c[4]=this.d,c[5]=0,c[6]=this.tx,c[7]=this.ty,c[8]=1):(c[0]=this.a,c[1]=this.c,c[2]=this.tx,c[3]=this.b,c[4]=this.d,c[5]=this.ty,c[6]=0,c[7]=0,c[8]=1),c},b.Matrix.prototype.apply=function(a,c){return c=c||new b.Point,c.x=this.a*a.x+this.b*a.y+this.tx,c.y=this.c*a.x+this.d*a.y+this.ty,c},b.Matrix.prototype.applyInverse=function(a,c){c=c||new b.Point;var d=1/(this.a*this.d+this.c*-this.b);return c.x=this.d*d*a.x+-this.c*d*a.y+(this.ty*this.c-this.tx*this.d)d,c.y=this.a*d*a.y+-this.b*d*a.x+(-this.ty*this.a+this.tx*this.b)*d,c},b.Matrix.prototype.translate=function(a,b){return this.tx+=a,this.ty+=b,this},b.Matrix.prototype.scale=function(a,b){return this.a=a,this.d*=b,this.c*=a,this.b*=b,this.tx*=a,this.ty*=b,this},b.Matrix.prototype.rotate=function(a){var b=Math.cos(a),c=Math.sin(a),d=this.a,e=this.c,f=this.tx;return this.a=d*b-this.b*c,this.b=d*c+this.b*b,this.c=e*b-this.d*c,this.d=e*c+this.d*b,this.tx=f*b-this.ty*c,this.ty=f*c+this.ty*b,this},b.Matrix.prototype.append=function(a){var b=this.a,c=this.b,d=this.c,e=this.d;return this.a=a.a*b+a.b*d,this.b=a.a*c+a.b*e,this.c=a.c*b+a.d*d,this.d=a.c*c+a.d*e,this.tx=a.tx*b+a.ty*d+this.tx,this.ty=a.tx*c+a.ty*e+this.ty,this},b.Matrix.prototype.identity=function(){return this.a=1,this.b=0,this.c=0,this.d=1,this.tx=0,this.ty=0,this},b.identityMatrix=new b.Matrix,b.DisplayObject=function(){this.position=new b.Point,this.scale=new b.Point(1,1),this.pivot=new b.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.hitArea=null,this.buttonMode=!1,this.renderable=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this._interactive=!1,this.defaultCursor=”pointer”,this.worldTransform=new b.Matrix,this._sr=0,this._cr=1,this.filterArea=null,this._bounds=new b.Rectangle(0,0,1,1),this._currentBounds=null,this._mask=null,this._cacheAsBitmap=!1,this._cacheIsDirty=!1},b.DisplayObject.prototype.constructor=b.DisplayObject,Object.defineProperty(b.DisplayObject.prototype,”interactive”,{get:function(){return this._interactive},set:function(a){this._interactive=a,this.stage&&(this.stage.dirty=!0)}}),Object.defineProperty(b.DisplayObject.prototype,”worldVisible”,{get:function(){var a=this;do{if(!a.visible)return!1;a=a.parent}while(a);return!0}}),Object.defineProperty(b.DisplayObject.prototype,”mask”,{get:function(){return this._mask},set:function(a){this._mask&&(this._mask.isMask=!1),this._mask=a,this._mask&&(this._mask.isMask=!0)}}),Object.defineProperty(b.DisplayObject.prototype,”filters”,{get:function(){return this._filters},set:function(a){if(a){for(var b=[],c=0;c

阅读全文

0 0