前几天,学习了某站的大大写的仿造黑客帝国字符雨效果,今天拿出来分享一下。
首先,我们使用 HTML5的canvas来写一个,废话不多说直接上代码!
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5模仿骇客帝国文字雨</title> </head> <body> <canvas id="q"></canvas> <script type="text/javascript" > var s = window.screen; var width = q.width = s.width; var height = q.height = s.height; var letters = Array(256).join(1).split(''); var draw = function () { q.getContext('2d').fillStyle='rgba(0,0,0,.05)'; q.getContext('2d').fillRect(0,0,width,height); q.getContext('2d').fillStyle='#0F0'; letters.map(function(y_pos, index){ text = String.fromCharCode(3e4+Math.random()*33); x_pos = index * 10; q.getContext('2d').fillText(text, x_pos, y_pos); letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10; }); }; setInterval(draw, 33); </script> </body> </html>
看效果,直接复制 copy .html 就可以看到效果了,如果自己还想更改直接自己更改就可以了。
接着,我们再来一个 HTML+ CSS + JS(jquery)的方法。
代码:
<!DOCTYPE html> <html> <head> <!-- CSS 样式 --> <style> * { margin: 0; padding: 0; box-sizing: content-box; } #pg { position: absolute; width: 100%; height: 40%; font-size: 0px; background-color: black; overflow: hidden; } #pg>div { display: inline-block; text-align: center; position: absolute; width: 1em; line-height: 1em; height: 100%; color: green; font-size: 15px; font-weight: bold; } a { color: #eeffee; font-weight: bold; } </style> </head> <body> <div id=pg> <div></div> </div> <audio> <source src="http://pisa.ucsd.edu/cse125/2001/cse190g1/matrix4.mp3" type="audio/mpeg"> </audio> </body> </html> <!-- JS 的jquery使用 --> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $('audio')[0].play(); // $('#pg>div').css("height", $('#pg').css("height")); $('#pg>div').height($('#pg').height()); var wid = $("#pg>div").width(); var sum = Math.ceil($('#pg').width() / wid); $('#pg').html(new Array(sum + 1).join("<div></div>")); var t_life = Array(sum + 1).join(0).split(''); var life = [], hei = [], Yg = [], Yc = [], Y_born = []; $("#pg>div").map(function (index) { $(this).css("left", (wid * index) + 'px'); }); var hei_page = Math.ceil($("#pg>div").height() / wid); var full_blank = Array(hei_page + 1).join(' <br>'); window.setInterval('tick();', 30); function tick() { $("#pg>div").map(function (i) { if (+t_life[i] <= 0) { $(this).html(full_blank); hei[i] = Math.round(Math.random() * (hei_page - 2) + 2); Yg[i] = Yc[i] = Y_born[i] = Math.round(Math.random() * (hei_page - hei[i])); life[i] = Math.round(Math.random() * (hei[i] - 2) + 2); t_life[i] = hei[i] + life[i]; } t_life[i]--, life[i]--, hei[i]--; var t, j; if (life[i] < 0) { t = $(this).html(); j = Yc[i] * 5, $(this).html(t.slice(0, j) + ' ' + t.slice(j + 1)); Yc[i]++; } if (hei[i] >= 0) { t = $(this).html(); var drill = '<a>' + (Math.random() < .1 ? ' ' : String.fromCharCode(Math.round(Math.random() * 25 + 'A'.charCodeAt(0)))) + '</a>'; if (Yg[i] == Y_born[i]) { $(this).html(t.slice(0, Yg[i] * 5) + drill); } else { j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1) + '<br>' + drill); } Yg[i]++; } else if (hei[i] == -1) { t = $(this).html(); j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1)); } }); } </script>
还是一样 直接贴代码就可以看到效果了。
其实我也在研究中,大家一起努力。