本篇文章小编给大家分享一下HTML实现代码雨源码及效果示例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
先看看效果
1、绿色:
2、彩色:
3、背景色:
4、绿色逐渐变浅:
源代码:
Code -by ZhenYu.Sha
“代码雨”js+css+html实现
HTML代码:
code by-zhenyu.sha
js代码:
(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 (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; icss代码:
@import url("http://fonts.googl*ea**pis.com/css?family=Carrois+Gothic"); @font-face { font-family: 'matrix-code'; src: url('http://n*e*il*carpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), url('http://*ne*ilc*arpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('http://n*eil**carpenter.com/demos/canvas/matrix/font/matrix-code.ttf') format('truetype'), url('http://neilca**rp*enter.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; 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; background: rgba(0, 0, 0, 0.8); 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; }