<! doctype html > < html> < head> < metacharset = " utf-8" > < title> </ title> < style>
html,body { margin : 0; overflow : hidden; width : 100%; height : 100%; cursor : none; background : black; background : linear-gradient ( to bottom, #000000 0%, #5788fe 100%) ;
}
.filter { width : 100%; height : 100%; position : absolute; top : 0; left : 0; background : #fe5757; animation : colorChange 30s ease-in-out infinite; animation-fill-mode : both; mix-blend-mode : overlay;
}
@keyframes colorChange{ 0%,100% { opacity : 0;
}
50% { opacity : .9;
}
} .landscape { position : absolute; bottom : 0px; left : 0; width : 100%; height : 100%;
background-image : url ( 'http://www.jq22.com/css/img/xkbg.png' ) ; background-size : 1000px 250px; background-repeat : repeat-x; background-position : center bottom;
}
</ style> </ head> < body> < divclass = " landscape" > </ div> < divclass = " filter" > </ div> < canvasid = " canvas" > </ canvas> < script>
function Star ( id, x, y ) { this . id = id; this . x = x; this . y = y; this . r = Math. floor ( Math. random ( ) * 2 ) + 1 ; var alpha = ( Math. floor ( Math. random ( ) * 10 ) + 1 ) / 10 / 2 ; this . color = "rgba(255,255,255," + alpha+ ")" ;
} Star . prototype. draw = function ( ) { ctx. fillStyle = this . color; ctx. shadowBlur = this . r * 2 ; ctx. beginPath ( ) ; ctx. arc ( this . x, this . y, this . r, 0 , 2 * Math. PI , false ) ; ctx. closePath ( ) ; ctx. fill ( ) ;
} Star . prototype. move = function ( ) { this . y -= .15 ; if ( this . y <= - 10 ) this . y = HEIGHT + 10 ; this . draw ( ) ;
} Star . prototype. die = function ( ) { stars[ this . id] = null ; delete stars[ this . id] ;
} function Dot ( id, x, y, r ) { this . id = id; this . x = x; this . y = y; this . r = Math. floor ( Math. random ( ) * 5 ) + 1 ; this . maxLinks = 2 ; this . speed = .5 ; this . a = .5 ; this . aReduction = .005 ; this . color = "rgba(255,255,255," + this . a+ ")" ; this . linkColor = "rgba(255,255,255," + this . a/ 4 + ")" ; this . dir = Math. floor ( Math. random ( ) * 140 ) + 200 ;
} Dot . prototype. draw = function ( ) { ctx. fillStyle = this . color; ctx. shadowBlur = this . r * 2 ; ctx. beginPath ( ) ; ctx. arc ( this . x, this . y, this . r, 0 , 2 * Math. PI , false ) ; ctx. closePath ( ) ; ctx. fill ( ) ;
} Dot . prototype. link = function ( ) { if ( this . id == 0 ) return ; var previousDot1 = getPreviousDot ( this . id, 1 ) ; var previousDot2 = getPreviousDot ( this . id, 2 ) ; var previousDot3 = getPreviousDot ( this . id, 3 ) ; if ( ! previousDot1) return ; ctx. strokeStyle = this . linkColor; ctx. moveTo ( previousDot1. x, previousDot1. y) ; ctx. beginPath ( ) ; ctx. lineTo ( this . x, this . y) ; if ( previousDot2 != false ) ctx. lineTo ( previousDot2. x, previousDot2. y) ; if ( previousDot3 != false ) ctx. lineTo ( previousDot3. x, previousDot3. y) ; ctx. stroke ( ) ; ctx. closePath ( ) ;
} function getPreviousDot ( id, stepback ) { if ( id == 0 || id - stepback < 0 ) return false ; if ( typeof dots[ id - stepback] != "undefined" ) return dots[ id - stepback] ; else return false ;
} Dot . prototype. move = function ( ) { this . a -= this . aReduction; if ( this . a <= 0 ) { this . die ( ) ; return } this . color = "rgba(255,255,255," + this . a+ ")" ; this . linkColor = "rgba(255,255,255," + this . a/ 4 + ")" ; this . x = this . x + Math. cos ( degToRad ( this . dir) ) * this . speed, this . y = this . y + Math. sin ( degToRad ( this . dir) ) * this . speed; this . draw ( ) ; this . link ( ) ;
} Dot . prototype. die = function ( ) { dots[ this . id] = null ; delete dots[ this . id] ;
} var canvas = document. getElementById ( 'canvas' ) , ctx = canvas. getContext ( '2d' ) , WIDTH , HEIGHT , mouseMoving = false , mouseMoveChecker, mouseX, mouseY, stars = [ ] , initStarsPopulation = 80 , dots = [ ] , dotsMinDist = 2 , maxDistFromCursor = 50 ; setCanvasSize ( ) ;
init ( ) ; function setCanvasSize ( ) { WIDTH = document. documentElement. clientWidth, HEIGHT = document. documentElement. clientHeight; canvas. setAttribute ( "width" , WIDTH ) ; canvas. setAttribute ( "height" , HEIGHT ) ;
} function init ( ) { ctx. strokeStyle = "white" ; ctx. shadowColor = "white" ; for ( var i = 0 ; i < initStarsPopulation; i++ ) { stars[ i] = new Star ( i, Math. floor ( Math. random ( ) * WIDTH ) , Math. floor ( Math. random ( ) * HEIGHT ) ) ; } ctx. shadowBlur = 0 ; animate ( ) ;
} function animate ( ) { ctx. clearRect ( 0 , 0 , WIDTH , HEIGHT ) ; for ( var i in stars) { stars[ i] . move ( ) ; } for ( var i in dots) { dots[ i] . move ( ) ; } drawIfMouseMoving ( ) ; requestAnimationFrame ( animate) ;
} window. onmousemove = function ( e ) { mouseMoving = true ; mouseX = e. clientX; mouseY = e. clientY; clearInterval ( mouseMoveChecker) ; mouseMoveChecker = setTimeout ( function ( ) { mouseMoving = false ; } , 100 ) ;
} function drawIfMouseMoving ( ) { if ( ! mouseMoving) return ; if ( dots. length == 0 ) { dots[ 0 ] = new Dot ( 0 , mouseX, mouseY) ; dots[ 0 ] . draw ( ) ; return ; } var previousDot = getPreviousDot ( dots. length, 1 ) ; var prevX = previousDot. x; var prevY = previousDot. y; var diffX = Math. abs ( prevX - mouseX) ; var diffY = Math. abs ( prevY - mouseY) ; if ( diffX < dotsMinDist || diffY < dotsMinDist) return ; var xVariation = Math. random ( ) > .5 ? - 1 : 1 ; xVariation = xVariation* Math. floor ( Math. random ( ) * maxDistFromCursor) + 1 ; var yVariation = Math. random ( ) > .5 ? - 1 : 1 ; yVariation = yVariation* Math. floor ( Math. random ( ) * maxDistFromCursor) + 1 ; dots[ dots. length] = new Dot ( dots. length, mouseX+ xVariation, mouseY+ yVariation) ; dots[ dots. length- 1 ] . draw ( ) ; dots[ dots. length- 1 ] . link ( ) ;
}
function degToRad ( deg ) { return deg * ( Math. PI / 180 ) ;
}
</ script> </ body> </ html>
