js+css模拟黑客攻击入侵画面动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css模拟黑客攻击入侵画面动画效果代码
代码标签: js css 模拟 黑客 攻击 入侵 画面 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 400; src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(//repo.bfw.wiki/bfwrepo/fonts/SourceCodePro.woff) format('woff'); } body { font-family: Source Code Pro; background:#000; color: #00FF00; margin:0; font-size: 13px; } canvas { position:absolute; top:0; left:0; } .bars-and-stuff{ left:66.6%; } .output-console { position:fixed; overflow:hidden; } p{margin:0} </style> </head> <body > <canvas class='hacker-3d-shiz'></canvas> <canvas class='bars-and-stuff'></canvas> <div class="output-console"></div> <script id="rendered-js" > var canvas = document.querySelector(".hacker-3d-shiz"), ctx = canvas.getContext("2d"), canvasBars = document.querySelector(".bars-and-stuff"), ctxBars = canvasBars.getContext("2d"), outputConsole = document.querySelector(".output-console"); canvas.width = window.innerWidth / 3 * 2; canvas.height = window.innerHeight / 3; canvasBars.width = window.innerWidth / 3; canvasBars.height = canvas.height; outputConsole.style.height = window.innerHeight / 3 * 2 + 'px'; outputConsole.style.top = window.innerHeight / 3 + 'px'; /* Graphics stuff */ function Square(z) { this.width = canvas.width / 2; if (canvas.height < 200) { this.width = 200; }; this.height = canvas.height; z = z || 0; this.points = [ new Point({ x: canvas.width / 2 - this.width, y: canvas.height / 2 - this.height, z: z }), new Point({ x: canvas.width / 2 + this.width, y: canvas.height / 2 - this.height, z: z }), new Point({ x: canvas.width / 2 + this.width, y: canvas.height / 2 + this.height, z: z }), new Point({ x: canvas.width / 2 - this.width, y: canvas.height / 2 + this.height, z: z })]; this.dist = 0; } Square.prototype.update = function () { for (var p = 0; p < this.points.length; p++) { this.points[p].rotateZ(0.001); this.points[p].z -= 3; if (this.points[p].z < -300) { this.points[p].z = 2700; } this.points[p].map2D(); } }; Square.prototype.render = function () { ctx.beginPath(); ctx.moveTo(this.points[0].xPos, this.points[0].yPos); for (var p = 1; p < this.points.length; p++) { if (this.points[p].z > -(focal - 50)) { ctx.lineTo(this.points[p].xPos, this.points[p].yPos); } } ctx.closePath(); ctx.stroke(); this.dist = this.points[this.points.length - 1].z; }; function Point(pos) { this.x = pos.x - canvas.width / 2 || 0; this.y = pos.y - canvas.height / 2 || 0; this.z = pos.z || 0; this.cX = 0; this.cY = 0; this.cZ = 0; this.xPos = 0; this.yPos = 0; this.map2D(); } Point.prototype.rotateZ = function (angleZ) { var cosZ = Math.cos(angleZ), sinZ = Math.sin(angleZ), x1 = this.x * cosZ - this.y * sinZ, y1 = this.y * cosZ + this.x * sinZ; this.x = x1; this.y = y1; }; Point.prototype.map2D = function () { var scaleX = focal / (focal + this.z + this.cZ), scaleY = focal / (focal + this.z + this.cZ); this.xPos = vpx + (this.cX + this.x) * scaleX; this.yPos = vpy + (this.cY + this.y) * scaleY; }; // Init graphics stuff var squares = [], focal = canvas.width / 2, vpx = canvas.width / 2, vpy = canvas.height / 2, barVals = [], sineVal = 0; /* fake console stuff */ var commandStart = ['Performing DNS Lookups for', 'Searching ', 'Analyzing ', 'Estimating Approximate Location of ', 'Compressing ', 'Requesting Authorization From : ', 'wget -a -t ', 'tar -xzf ', 'Entering Location ', 'Compilation Started of ', 'Downloading '], commandParts = ['Data Structure', 'http://wwjd.com.........完整代码请登录后点击上方下载按钮下载查看
网友评论0