登录页面

动态网页背景+登录页面

![这里写图片描述](https://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**

var _gsScope=”undefined”!=typeof module&&module.exports&&”undefined”!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){“use strict”;var t=/(\d|.)+/g,e={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],fuchsia:[255,0,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},i=function(t,e,i){return t=0>t?t+1:t>1?t-1:t,0|255*(1>6*t?e+6*(i-e)t:.5>t?i:2>3*t?e+6(i-e)(2/3-t):e)+.5},s=function(s){if(“”===s||null==s||”none”===s)return e.transparent;if(e[s])return e[s];if(“number”==typeof s)return[s>>16,255&s>>8,255&s];if(“#”===s.charAt(0))return 4===s.length&&(s=”#”+s.charAt(1)+s.charAt(1)+s.charAt(2)+s.charAt(2)+s.charAt(3)+s.charAt(3)),s=parseInt(s.substr(1),16),[s>>16,255&s>>8,255&s];if(“hsl”===s.substr(0,3)){s=s.match(t);var r=Number(s[0])%360/360,n=Number(s[1])/100,a=Number(s[2])/100,o=.5>=a?a(n+1):a+n-a*n,h=2*a-o;return s.length>3&&(s[3]=Number(s[3])),s[0]=i(r+1/3,h,o),s[1]=i(r,h,o),s[2]=i(r-1/3,h,o),s}return s.match(t)||e.transparent};_gsScope._gsDefine.plugin({propName:”colorProps”,version:”1.2.1”,priority:-1,API:2,init:function(t,e){this._target=t;var i,r,n,a;for(i in e)n=s(e[i]),this._firstPT=a={_next:this._firstPT,p:i,f:”function”==typeof t[i],n:i,r:!1},r=s(a.f?ti.indexOf(“set”)||”function”!=typeof t[“get”+i.substr(3)]?i:”get”+i.substr(3):t[i]),a.s=Number(r[0]),a.c=Number(n[0])-a.s,a.gs=Number(r[1]),a.gc=Number(n[1])-a.gs,a.bs=Number(r[2]),a.bc=Number(n[2])-a.bs,(a.rgba=r.length>3||n.length>3)&&(a.as=4>r.length?1:Number(r[3]),a.ac=(4>n.length?1:Number(n[3]))-a.as),a._next&&(a._next._prev=a);return!0},set:function(t){for(var e,i=this._firstPT;i;)e=(i.rgba?”rgba(“:”rgb(“)+(i.s+t*i.c>>0)+”, “+(i.gs+t*i.gc>>0)+”, “+(i.bs+t*i.bc>>0)+(i.rgba?”, “+(i.as+t*i.ac):”“)+”)”,i.f?this._targeti.p:this._target[i.p]=e,i=i._next}})}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();

**注意js文件代码如下文件名叫index.js**
var width = window.innerWidth;
var height = window.innerHeight;

// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x0, true);

// create a renderer instance
var renderer = PIXI.autoDetectRenderer(width, height);

// add the renderer view element to the DOM
document.body.appendChild(renderer.view);

// smoke shader
var 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

展开阅读全文

没有更多推荐了,返回首页