[新手上路]批处理新手入门导读[视频教程]批处理基础视频教程[视频教程]VBS基础视频教程[批处理精品]批处理版照片整理器
[批处理精品]纯批处理备份&还原驱动[批处理精品]CMD命令50条不能说的秘密[在线下载]第三方命令行工具[在线帮助]VBScript / JScript 在线参考
返回列表 发帖
aa77dd@163.com

Rank: 5Rank: 5

帖子
548 
积分
1246 
技术
176  
捐助
0  
注册时间
2015-6-4 
1楼 跳转到 » 倒序看帖
打印
tT
发表于 2015-7-20 22:45 | 显示全部帖子

[原创代码] DIV+CSS+JS 实现黑客帝国字符雨特效

本帖最后由 aa77dd@163.com 于 2015-7-24 01:18 编辑

请将下面代码保存为 HTML 文件运行, 本代码在最新版 Chrome 和 Firefox 浏览器中测试通过, 未考虑低版本浏览器(特别是IE)的兼容性
演示地址 http://a7d.net46.net/matrix.html
  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <style>

  5. * {

  6.     margin: 0;

  7.     padding: 0;

  8.     box-sizing: content-box;

  9. }

  10. #pg {

  11.     position: absolute;

  12.     width: 100%;

  13.     height: 100%;

  14.     font-size: 0px;

  15.     background-color: black;

  16.     overflow: hidden;

  17. }

  18. #pg>div {

  19.     display: inline-block;

  20.     text-align: center;

  21.     position: absolute;

  22.     width: 1em;

  23.     line-height: 1em;

  24.     height: 100%;

  25.     color: green;

  26.     font-size: 15px;

  27.     font-weight: bold;

  28. }

  29. a {

  30.     color: #eeffee;

  31.     font-weight: bold;

  32. }

  33. </style>

  34. </head>

  35. <body>

  36.     <div id=pg>

  37.         <div></div>

  38.     </div>

  39.     <audio>

  40.         <source src="http://pisa.ucsd.edu/cse125/2001/cse190g1/matrix4.mp3" type="audio/mpeg">

  41.     </audio>

  42. </body>

  43. </html>

  44. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  45. <!-- <script src="JS/jquery-1.10.2.min.js"></script> -->

  46. <script>

  47.     $('audio')[0].play();

  48.     // $('#pg>div').css("height", $('#pg').css("height"));

  49.     $('#pg>div').height($('#pg').height());

  50.     var wid = $("#pg>div").width();

  51.     var sum = Math.ceil($('#pg').width() / wid);

  52.     $('#pg').html(new Array(sum + 1).join("<div></div>"));

  53.     var t_life = Array(sum + 1).join(0).split('');

  54.     var life = [], hei = [], Yg = [], Yc = [], Y_born = [];

  55.     $("#pg>div").map(function (index) {

  56.         $(this).css("left", (wid * index) + 'px');

  57.     });

  58.     var hei_page = Math.ceil($("#pg>div").height() / wid);

  59.     var full_blank = Array(hei_page + 1).join(' <br>');

  60.     window.setInterval('tick();', 30);

  61.     function tick() {

  62.         $("#pg>div").map(function (i) {

  63.             if (+t_life[i] <= 0) {

  64.                 $(this).html(full_blank);

  65.                 hei[i] = Math.round(Math.random() * (hei_page - 2) + 2);

  66.                 Yg[i] = Yc[i] = Y_born[i] = Math.round(Math.random() * (hei_page - hei[i]));

  67.                 life[i] = Math.round(Math.random() * (hei[i] - 2) + 2);

  68.                 t_life[i] = hei[i] + life[i];

  69.             }

  70.             t_life[i]--, life[i]--, hei[i]--;

  71.             var t, j;

  72.             if (life[i] < 0) {

  73.                 t = $(this).html();

  74.                 j = Yc[i] * 5, $(this).html(t.slice(0, j) + ' ' + t.slice(j + 1));

  75.                 Yc[i]++;

  76.             }

  77.             if (hei[i] >= 0) {

  78.                 t = $(this).html();

  79.                 var drill = '<a>' + (Math.random() < .1 ? ' ' : String.fromCharCode(Math.round(Math.random() * 25 + 'A'.charCodeAt(0)))) + '</a>';

  80.                 if (Yg[i] == Y_born[i]) {

  81.                     $(this).html(t.slice(0, Yg[i] * 5) + drill);

  82.                 } else {

  83.                     j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1) + '<br>' + drill);

  84.                 }

  85.                 Yg[i]++;

  86.             } else if (hei[i] == -1) {

  87.                 t = $(this).html();

  88.                 j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1));

  89.             }

  90.         });

  91.     }

  92. </script>
复制代码
1

评分人数

    • yu2n: 效果很赞！技术 + 1
收藏 分享

aa77dd@163.com

Rank: 5Rank: 5

帖子
548 
积分
1246 
技术
176  
捐助
0  
注册时间
2015-6-4 
2楼
发表于 2015-7-24 00:28 | 显示全部帖子
分享一个老的吧     HTML5 canvas 技术的
作者: Shaun Dunne
http://cssdeck.com/labs/the-matrix

代码很简洁, 低版 IE 就不演了
  1. <!DOCTYPE html>

  2. <html><head></head><body><canvas id="q"></canvas></body></html>

  3. <script>

  4. var s = window.screen;

  5. var width = q.width = s.width;

  6. var height = q.height = s.height;

  7. var letters = Array(256).join(1).split('');

  8. var draw = function () {

  9.     q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)';

  10.     q.getContext('2d').fillRect(0, 0, width, height);

  11.     q.getContext('2d').fillStyle = '#0F0';

  12.     letters.map(function (y_pos, index) {

  13.         text = String.fromCharCode(/*3e4*/ 65 + Math.random() * 33);

  14.         x_pos = index * 10;

  15.         q.getContext('2d').fillText(text, x_pos, y_pos);

  16.         letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;

  17.     });

  18. };

  19. setInterval(draw, 33);

  20. </script>
复制代码
3

评分人数

    • 老刘1号: 突然吃鲸技术 + 1
    • tigerpower: 流畅逼真技术 + 1
    • CrLf: 给跪，这一定是上帝遗落人间的代码PB + 10 技术 + 1

TOP

aa77dd@163.com

Rank: 5Rank: 5

帖子
548 
积分
1246 
技术
176  
捐助
0  
注册时间
2015-6-4 
3楼
发表于 2016-10-6 18:59 | 显示全部帖子
本帖最后由 aa77dd@163.com 于 2016-10-6 19:01 编辑

回复 9# 523066680

HTML 5 也很好玩的

下面的都不是我做的
我不时逛下 codepen

单纯用 css 都能做特效
http://codepen.io/jlong/pen/wciCv

再来个 3D 的
http://codepen.io/leemark/pen/LfiKh

这个题材应该是很多人感兴趣的
site:codepen.io matrix
1

评分人数

TOP

返回列表