JS+CSS+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; }