消失在宇宙星空中的404页面特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是消失在宇宙星空中的404页面特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为消失在宇宙星空中的404页面，属于站长常用代码" />
<title>消失在宇宙星空中的404页面</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 代码 开始 -->
<div class="fullScreen" id="fullScreen">
    <a href="#" target="_blank" class="logo"><img src="images/homepage-logo.png"></a>
    <img class="rotating" src="images/spaceman.svg" />
    <div class="pagenotfound-text">
    <h1>Page lost in space</h1>
    <h2><a href="#" target="_blank">Go back to the homepage</a></h2>
    </div>
    <canvas id="canvas2d"></canvas>
</div>
<script type="text/javascript" src="js/lrtk.js"></script>
<!-- 代码 结束 -->
</body>
</html>

JS代码(lrtk.js):

// ����ͼ�� �Ѽ����� www.lanrentuku.com /** * The stars in our starfield! * Stars coordinate system is relative to the CENTER of the canvas * @param{
	number}
x * @param{
	number}
y */
 var Star = function(x,y,maxSpeed){
	this.x = x;
	this.y = y;
	this.slope = y / x;
	// This only works because our origin is always (0,0) this.opacity = 0;
	this.speed = Math.max(Math.random() * maxSpeed,1);
}
;
	/** * Compute the distance of this star relative to any other point in space. * * @param{
	int}
originX * @param{
	int}
originY * * @return{
	float}
The distance of this star to the given origin */
 Star.prototype.distanceTo = function(originX,originY){
	return Math.sqrt(Math.pow(originX - this.x,2) + Math.pow(originY - this.y,2));
}
;
	/** * Reinitializes this star's attributes,without re-creating it * * @param{
	number}
x * @param{
	number}
y * * @return{
	Star}
this star */
 Star.prototype.resetPosition = function(x,y,maxSpeed){
	Star.apply(this,arguments);
	return this;
}
;
	/** * The BigBang factory creates stars (Should be called StarFactory,but that is * a WAY LESS COOL NAME! * @type{
	Object}
*/
 var BigBang ={
	/** * Returns a random star within a region of the space. * * @param{
	number}
minX minimum X coordinate of the region * @param{
	number}
minY minimum Y coordinate of the region * @param{
	number}
maxX maximum X coordinate of the region * @param{
	number}
maxY maximum Y coordinate of the region * * @return{
	Star}
The random star */
 getRandomStar:function(minX,minY,maxX,maxY,maxSpeed){
	var coords = BigBang.getRandomPosition(minX,minY,maxX,maxY);
	return new Star(coords.x,coords.y,maxSpeed);
}
,/** * Gets a random (x,y) position within a bounding box * * * @param{
	number}
minX minimum X coordinate of the region * @param{
	number}
minY minimum Y coordinate of the region * @param{
	number}
maxX maximum X coordinate of the region * @param{
	number}
maxY maximum Y coordinate of the region * * @return{
	Object}
An object with random{
	x,y}
positions */
 getRandomPosition:function(minX,minY,maxX,maxY){
	return{
	x:Math.floor((Math.random() * maxX) + minX),y:Math.floor((Math.random() * maxY) + minY)}
;
}
}
;
	/** * Constructor function of our starfield. This just prepares the DOM nodes where * the scene will be rendered. * * @param{
	string}
canvasId The DOM Id of the <div> containing a <canvas> tag */
 var StarField = function(containerId){
	this.container = document.getElementById(containerId);
	this.canvasElem = this.container.getElementsByTagName('canvas')[0];
	this.canvas = this.canvasElem.getContext('2d');
	this.width = this.container.offsetWidth;
	this.height = this.container.offsetHeight;
	this.starField = [];
}
;
	/** * Updates the properties for every star for the next frame to be rendered */
 StarField.prototype._updateStarField = function(){
	var i,star,randomLoc,increment;
	for (i = 0;
	i < this.numStars;
	i++){
	star = this.starField[i];
	increment = Math.min(star.speed,Math.abs(star.speed / star.slope));
	star.x += (star.x > 0) ? increment:-increment;
	star.y = star.slope * star.x;
	star.opacity += star.speed / 100;
	// Recycle star obj if it goes out of the frame if ((Math.abs(star.x) > this.width / 2) || (Math.abs(star.y) > this.height / 2)){
	//randomLoc = BigBang.getRandomPosition( // -this.width / 2,-this.height / 2,// this.width,this.height //);
	randomLoc = BigBang.getRandomPosition( -this.width / 10,-this.height / 10,this.width / 5,this.height / 5 );
	star.resetPosition(randomLoc.x,randomLoc.y,this.maxStarSpeed);
}
}
}
;
	/** * Renders the whole starfield (background + stars) * This method could be made more efficient by just blipping each star,* and not redrawing the whole frame */
 StarField.prototype._renderStarField = function(){
	var i,star;
	// Background this.canvas.fillStyle = "rgba(0,0,0,.5)";
	this.canvas.fillRect(0,0,this.width,this.height);
	// Stars for (i = 0;
	i < this.numStars;
	i++){
	star = this.starField[i];
	this.canvas.fillStyle = "rgba(188,213,236," + star.opacity + ")";
	this.canvas.fillRect( star.x + this.width / 2,star.y + this.height / 2,2,2);
}
}
;
	/** * Function that handles the animation of each frame. Update the starfield * positions and re-render */
 StarField.prototype._renderFrame = function(elapsedTime){
	var timeSinceLastFrame = elapsedTime - (this.prevFrameTime || 0);
	window.requestAnimationFrame(this._renderFrame.bind(this));
	// Skip frames unless at least 30ms have passed since the last one // (Cap to ~30fps) if (timeSinceLastFrame >= 30 || !this.prevFrameTime){
	this.prevFrameTime = elapsedTime;
	this._updateStarField();
	this._renderStarField();
}
}
;
	/** * Makes sure that the canvas size fits the size of its container */
 StarField.prototype._adjustCanvasSize = function(width,height){
	// Set the canvas size to match the container ID (and cache values) this.width = this.canvasElem.width = width || this.container.offsetWidth;
	this.height = this.canvasElem.height = height || this.container.offsetHeight;
}
;
	/** * This listener compares the old container size with the new one,and caches * the new values. */
 StarField.prototype._watchCanvasSize = function(elapsedTime){
	var timeSinceLastCheck = elapsedTime - (this.prevCheckTime || 0),width,height;
	window.requestAnimationFrame(this._watchCanvasSize.bind(this));
	// Skip frames unless at least 333ms have passed since the last check // (Cap to ~3fps) if (timeSinceLastCheck >= 333 || !this.prevCheckTime){
	this.prevCheckTime = elapsedTime;
	width = this.container.offsetWidth;
	height = this.container.offsetHeight;
	if (this.oldWidth !== width || this.oldHeight !== height){
	this.oldWidth = width;
	this.oldHeight = height;
	this._adjustCanvasSize(width,height);
}
}
}
;
	/** * Initializes the scene by resizing the canvas to the appropiate value,and * sets up the main loop. * @param{
	int}
numStars Number of stars in our starfield */
 StarField.prototype._initScene = function(numStars){
	var i;
	for (i = 0;
	i < this.numStars;
	i++){
	this.starField.push( BigBang.getRandomStar(-this.width / 2,-this.height / 2,this.width,this.height,this.maxStarSpeed) );
}
// Intervals not stored because I don't plan to detach them later... window.requestAnimationFrame(this._renderFrame.bind(this));
	window.requestAnimationFrame(this._watchCanvasSize.bind(this));
}
;
	/** * Kicks off everything! * @param{
	int}
numStars The number of stars to render * @param{
	int}
maxStarSpeed Maximum speed of the stars (pixels / frame) */
 StarField.prototype.render = function(numStars,maxStarSpeed){
	this.numStars = numStars || 100;
	this.maxStarSpeed = maxStarSpeed || 3;
	this._initScene(this.numStars);
}
;
	/** * requestAnimationFrame shim layer with setTimeout fallback * @see http://paulirish.com/2011/requestanimationframe-for-smart-animating */
 (function(){
	var lastTime = 0;
	var vendors = ['ms','moz','webkit','o'];
	for(var x = 0;
	x < vendors.length && !window.requestAnimationFrame;
	++x){
	window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
	window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback,element){
	var currTime = new Date().getTime();
	var timeToCall = Math.max(0,16 - (currTime - lastTime));
	var id = window.setTimeout(function(){
	callback(currTime + timeToCall);
}
,timeToCall);
	lastTime = currTime + timeToCall;
	return id;
}
;
	if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id){
	clearTimeout(id);
}
;
}
());
	// Kick off! var starField = new StarField('fullScreen').render(333,3);

CSS代码(lrtk.css):

html,body{overflow:hidden;background:#000;padding:0px;margin:0px;width:100%;height:100%;}
img{max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
a{color:white;text-decoration:none;border-bottom:none;}
a:hover{color:white;text-decoration:none;}
h1{background:-webkit-linear-gradient(#5f5287,#8b7cb9);font-family:"proxima nova","Roboto","helvetica",Arial,sans-serif;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:34px;font-weight:bold;letter-spacing:-2px;line-height:50px;}
h2{color:white;font-family:"proxima nova","Roboto","helvetica",Arial,sans-serif;font-size:24px;font-weight:normal;.opacity(50);}
h1 a,h2 a{color:#505358}
.fullScreen{height:100%;}
a.logo{position:absolute;bottom:50px;right:50px;width:250px;text-decoration:none;border-bottom:none;}
img.rotating{position:absolute;left:50%;top:50%;margin-left:-256px;margin-top:-256px;-webkit-transition:opacity 2s ease-in;-moz-transition:opacity 2s ease-in;-o-transition:opacity 2s ease-in;-ms-transition:opacity 2s ease-in;transition:opacity 2s ease-in;}
@-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotating{from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-o-keyframes rotating{from{-o-transform:rotate(0deg);}
to{-o-transform:rotate(360deg);}
}
@-ms-keyframes rotating{from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
.rotating{-webkit-animation:rotating 120s linear infinite;-moz-animation:rotating 120s linear infinite;}
div.pagenotfound-text{position:absolute;bottom:50px;left:50px;}

附件:下载该文件资源,减少时间成本(增值服务)