HTML实现代码雨源码及效果示例

 (function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x ', '[', ']', '^', '~'], codes: [], createCodeLoop: null, codesCounter: 0, init: function() { M.c = document.getElementById('canvas'); M.ctx = M.c.getContext('2d'); M.c.width = M.WIDTH; M.c.height = M.HEIGHT; M.ctx.shadowBlur = 0; M.ctx.fillStyle = '#000'; M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT); M.ctx.font = M.font; M.COLUMNS = Math.ceil(M.WIDTH / M.settings.COL_WIDTH); for (var i = 0; i  M.COLUMNS) { clearTimeout(M.createCodeLoop); return; } var randomInterval = M.randomFromInterval(0, 100); var column = M.assignColumn(); if (column) { var codeLength = M.randomFromInterval(M.settings.CODE_LENGTH_PARAMS.min, M.settings.CODE_LENGTH_PARAMS.max); var codeVelocity = (Math.random() * (M.settings.VELOCITY_PARAMS.max - M.settings.VELOCITY_PARAMS.min)) + M.settings.VELOCITY_PARAMS.min; var lettersLength = M.letters.length; M.codes[column][0].position = { 'x': (column * M.settings.COL_WIDTH), 'y': 0 }; M.codes[column][0].velocity = codeVelocity; M.codes[column][0].strength = M.codes[column][0].velocity / M.settings.VELOCITY_PARAMS.max; for (var i = 1; i <= codeLength; i++) { var newLetter = M.randomFromInterval(0, (lettersLength - 1)); M.codes[column][i] = M.letters[newLetter]; } M.createCanvii(column); M.codesCounter++; } M.createCodeLoop = setTimeout(M.createCode, randomInterval); }, createCanvii: function(i) { var codeLen = M.codes[i].length - 1; var canvHeight = codeLen * M.settings.COL_HEIGHT; var velocity = M.codes[i][0].velocity; var strength = M.codes[i][0].strength; var text, fadeStrength; var newCanv = document.createElement('canvas'); var newCtx = newCanv.getContext('2d'); newCanv.width = M.settings.COL_WIDTH; newCanv.height = canvHeight; for (var j = 1; j  (codeLen - 4)) { fadeStrength = j / codeLen; fadeStrength = 1 - fadeStrength; newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; newCtx.shadowBlur = 0; newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')'; } else { newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; newCtx.shadowBlur = 0; newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')'; } newCtx.fillText(text, 0, (canvHeight - (j * M.settings.COL_HEIGHT))); } M.codes[i][0].canvas = newCanv; }, swapCharacters: function() { var randomCodeIndex; var randomCode; var randomCodeLen; var randomCharIndex; var newRandomCharIndex; var newRandomChar; for (var i = 0; i <20; i++) { randomCodeIndex = M.randomFromInterval(0, (M.codes.length - 1)); randomCode = M.codes[randomCodeIndex]; randomCodeLen = randomCode.length; randomCharIndex = M.randomFromInterval(2, (randomCodeLen - 1)); newRandomCharIndex = M.randomFromInterval(0, (M.letters.length - 1)); newRandomChar = M.letters[newRandomCharIndex]; randomCode[randomCharIndex] = newRandomChar; } M.swapCharacters(); }, createLines: function() { M.linesC = document.createElement('canvas'); M.linesC.width = M.WIDTH; M.linesC.height = M.HEIGHT; M.linesC.style.position = 'absolute'; M.linesC.style.top = 0; M.linesC.style.left = 0; M.linesC.style.zIndex = 10; document.body.appendChild(M.linesC); var linesYBlack = 0; var linesYWhite = 0; M.ctx2 = M.linesC.getContext('2d'); M.ctx2.beginPath(); M.ctx2.lineWidth = 1; M.ctx2.strokeStyle = 'rgba(0, 0, 0, 0.7)'; while (linesYBlack 

 @import url("http://fonts.googleapis.com/css?family=Carrois+Gothic"); @font-face { font-family: 'matrix-code'; src: url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf') format('truetype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.svg#svgFontName') format('svg'); } html, body { -webkit-font-smoothing: antialiased; font: normal 12px/14px "Carrois Gothic", sans-serif; width: 100%; height: 100%; margin: 0; overflow: hidden; color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { background: black; } #stats { z-index: 100; } #info { background: rgba(0, 0, 0, 0.7); position: fixed; bottom: 0; left: 0px; width: 250px; padding: 10px 20px 20px; z-index: 100; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform .5s ease-in-out; -moz-transition: -moz-transform .5s ease-in-out; -o-transition: -o-transform .5s ease-in-out; transition: transform .5s ease-in-out; } #info.closed { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .toggle-info { position: absolute; display: block; height: 10px; background: rgba(0, 0, 0, 0.8); width: 290px; left: 0; text-align: center; padding: 3px 0 7px; text-decoration: none; color: white; text-shadow: none; } .toggle-info:hover { background: rgb(0, 0, 0); } #close { top: -20px; } #open { bottom: -20px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } button { background: rgba(255, 255, 255, 0.2); color: #fff; border: 0; border-radius: 2px; padding: 7px 10px; box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.3); cursor: pointer; } button:hover { background: rgba(255, 255, 255, 0.1); } pa { color: #fff; } pa:hover { color: #EFFDEB; text-shadow: 0px 0px 5px #75AD61; }