动态繁星背景太空迷失404页面效果代码
代码语言:html
所属分类:布局界面
代码描述:动态繁星背景太空迷失404页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!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" /> <title></title> <style> 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; } </style> </head> <body> <!-- 代码 开始 --> <div class="fullScreen" id="fullScreen"> <a href="#" class="logo"><img src="//repo.bfw.wiki/bfwrepo/icon/60b2c443baaca.png"></a> <img class="rotating" src="//repo.bfw.wiki/bfwrepo/image/60f8c3d0e5a68.png" /> <div class="pagenotfound-text"> <h1>Page lost in space</h1> <h2><a href="#">Go back to the homepage</a></h2> </div> <canvas id="canvas2d"></canvas> </div> <script type="text/javascript"> /** * 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).........完整代码请登录后点击上方下载按钮下载查看
网友评论0