html代码雨

简易代码雨特效
千次阅读

2021-06-12 10:54:40

window.onload = function() {

//获取画布对象

var canvas = document.getElementById("canvas");

//获取画布的上下文

var context = canvas.getContext("2d");

//获取浏览器屏幕的宽度和高度

var W = window.innerWidth;

var H = window.innerHeight;

//设置canvas的宽度和高度

canvas.width = W;

canvas.height = H;

//每个文字的字体大小

var fontSize = 16;

//计算列

var colunms = Math.floor(W / fontSize);

//记录每列文字的y轴坐标

var drops = [];

//给每一个文字初始化一个起始点的位置

for (var i = 0; i < colunms; i++) {

drops.push(0);

}

//运动的文字

var str = "01";

//4:fillText(str,x,y);原理就是去更改y的坐标位置

//绘画的函数

function draw() {

context.fillStyle = "rgba(0,0,0,0.05)";

context.fillRect(0, 0, W, H);

//给字体设置样式

context.font = "700 " + fontSize + "px 微软雅黑";

//给字体添加颜色

context.fillStyle = "#00cc33"; //可以rgb,hsl, 标准色，十六进制颜色

//写入画布中

for (var i = 0; i < colunms; i++) {

var index = Math.floor(Math.random() * str.length);

var x = i * fontSize;

var y = drops[i] * fontSize;

context.fillText(str[index], x, y);

//如果要改变时间，肯定就是改变每次他的起点

if (y >= canvas.height && Math.random() > 0.99) {

drops[i] = 0;

}

drops[i]++;

}

};

function randColor() {

var r = Math.floor(Math.random() * 256);

var g = Math.floor(Math.random() * 256);

var b = Math.floor(Math.random() * 256);

return "rgb(" + r + "," + g + "," + b + ")";

}

draw();

setInterval(draw, 30);

};

更多相关内容
HTML代码雨fdyad
2020-08-27 00:16:02

HTML代码雨fdyad

收起
html代码雨.7z
2020-09-12 20:33:53

html道家代码雨.7z ，html道家代码雨.7z ，html道家代码雨.7z html道家代码雨.7z ，html道家代码雨.7z ，html道家代码雨.7z html道家代码雨.7z ，html道家代码雨.7z ，html道家代码雨.7z

收起
黑客帝国代码雨HTML
2018-10-29 18:20:35

黑客帝国代码雨HTML,网页模仿骇客操作，飘出代码雨，纯JavaScript编写

收起

java
黑客帝国代码雨html
2021-10-28 21:31:51

使用html实现黑客帝国代码雨

收起
HTML实现代码雨源码及效果示例
2020-11-21 16:23:34

最近学习了HTML，今天写个HTML代码雨，然后下面用HTML和js也写了一个，给自己留点笔记先看看效果 1、绿色： 2、彩色： 3、背景色： 4、绿色逐渐变浅：源代码： <!DOCTYPE html> <html> <head&...

收起
黑客帝国代码雨html特效
2020-02-20 11:19:20

黑客帝国代码雨html特效，无需依靠任何软件，《黑客帝国》同款，即下即用，积分为零，可以下载，文件无法使用请私信

收起
HTML满屏华丽代码雨
2020-08-02 22:14:40

HTML代码雨，满屏幕的代码雨，华丽好看，适合生日送祝福

收起
HTML5编写的代码雨
2020-05-17 16:20:27

html代码雨

收起
流星雨代码.html
2021-02-08 16:55:51

流星雨代码.html

收起
黑客帝国-代码雨.html
2019-11-03 12:11:54

黑客帝国-代码雨黑客帝国-代码雨黑客帝国-代码雨黑客帝国-代码雨黑客帝国-代码雨

收起
html5手机端抢红包雨代码
2021-06-24 13:14:17

html5手机端抢红包雨代码，打开页面，红包随机飘落，点击查看中奖情况。

收起
HTML5流星雨动画背景特效特效代码
2021-03-20 02:59:20

HTML5流星雨动画背景特效是一款带有搜索框的流星雨背景动画特效。

收起

用HTML制作代码雨源码分享

2022-01-15 21:10:23

<!DOCTYPE HTML> <html> <head> ...meta charset="utf-8" />...代码雨</title>  <style type="text/css"> * {margin: 0; padding: 0;} //无边距 .

<!DOCTYPE HTML>
 <html>
     <head>
         <meta charset="utf-8" />
         <title>代码雨</title>
 
         <!-- CSS样式 -->
         <style type="text/css">
            * {margin: 0; padding: 0;} //无边距
             body {background: black;}
             canvas {display: block;}
</style>
     </head>
 
     <body>
         <canvas id="c"></canvas>    <!-- 定义画布 -->
         <script type="text/javascript">
             var c = document.getElementById("c");  //拿到画布并赋值给c
             var ctx = c.getContext("2d");     //创建画笔,2d的
 
             c.height = window.innerHeight;  //获取屏幕分辨率:高
             c.width = window.innerWidth;    //宽
             var chinese = "01";
             chinese = chinese.split("");   //split() 方法用于把一个字符串分割成字符串数组。
 
             var font_size = 10;   //字体大小
             var columns = Math.floor(c.width/font_size);  //屏幕大小除以字体大小=字体个数;向下取整
             //an array of drops - one per column
             var drops = [];  //创建一个数组
             for(var x = 0; x < columns; x++)
             drops[x] = 1;
             //drawing the characters
             function draw()
{
             ctx.fillStyle = "rgba(0, 0, 0, 0.05)";//rgba:基础三色加不透明度
             ctx.fillRect(0, 0, c.width, c.height);
 
             ctx.fillStyle = "#0F0"; //green text
             ctx.font = font_size + "px arial";
             //looping over drops
             for(var i = 0; i < drops.length; i++)
            {
             var text = chinese[Math.floor(Math.random()*chinese.length)];
             ctx.fillText(text, i*font_size, drops[i]*font_size);
 
             //越接近一表示一起下落的可能性越低
             if(drops[i]*font_size > c.height && Math.random() > 0.975)
                     drops[i] = 0;
                     drops[i]++;
            }
            }
             setInterval(draw, 33);//时间间隔
</script>
 </body>
 </html>

效果如下：

收起

展开全文

javascript css

黑客帝国代码雨.bat
2020-10-02 11:44:29

黑客帝国代码雨代码，打开就运行。黑客帝国代码雨代码，打开就运行。黑客帝国代码雨代码，打开就运行。黑客帝国代码雨代码，打开就运行。黑客帝国代码雨代码，打开就运行。

收起
代码雨 html版绿色字体保证完美
2020-05-05 13:35:17

代码雨

收起
黑客帝国代码雨.html
2021-01-25 01:31:57

转自g55zhw93 (ง •̀_•́)ง 的代码雨网页代码

收起
黑客帝国代码雨HTML5特效
2021-06-24 10:23:45

黑客帝国代码雨HTML5特效是一款酷炫的全屏动画背景代码。

收起
黑客帝国 代码雨（HTML）
2021-08-20 19:19:25

很酷的代码HTML，适合初学者学习

收起
前端 代码雨（html+js+css）.rar
2020-12-17 19:39:00

本资源包含一个完整的由html+css+js实现的前端代码雨展示片段，需要的朋友可以下载哦！！！！！！！！！！！！！！！！！！！！！！！！

收起
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020-10-15 12:28:42

主要介绍了JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果,需要的朋友可以参考下

收起

“代码雨”纯HTML源码实现及效果

万次阅读 多人点赞 2017-05-08 15:19:36

先看看效果 1、绿色： 2、彩色： ...源代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <ti...

先看看效果

1、绿色：

2、彩色：

3、背景色：

4、绿色逐渐变浅：

源代码：

<!DOCTYPE html>
<html>
   
<head>   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Code -by ZhenYu.Sha</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            background: #000;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
   
<body>  
<canvas id="cvs"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");
    var cw = cvs.width = document.body.clientWidth;
    var ch = cvs.height = document.body.clientHeight;
    //动画绘制对象
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var codeRainArr = []; //代码雨数组
    var cols = parseInt(cw / 14); //代码雨列数
    var step = 16;    //步长，每一列内部数字之间的上下间隔
    ctx.font = "bold 26px microsoft yahei"; //声明字体，个人喜欢微软雅黑

    function createColorCv() {
        //画布基本颜色
        ctx.fillStyle = "#242424";
        ctx.fillRect(0, 0, cw, ch);
    }

    //创建代码雨
    function createCodeRain() {
        for (var n = 0; n < cols; n++) {
            var col = [];
            //基础位置，为了列与列之间产生错位
            var basePos = parseInt(Math.random() * 300);
            //随机速度 3~13之间
            var speed = parseInt(Math.random() * 10) + 3;
            //每组的x轴位置随机产生
            var colx = parseInt(Math.random() * cw)

            //绿色随机
            var rgbr = 0;
            var rgbg = parseInt(Math.random() * 255);
            var rgbb = 0;
            //ctx.fillStyle = "rgb("+r+','+g+','+b+")"

            for (var i = 0; i < parseInt(ch / step) / 2; i++) {
                var code = {
                    x: colx,
                    y: -(step * i) - basePos,
                    speed: speed,
                    //  text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1  //随机生成0或者1
                    text: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //随机生成字母数组中的一个
                    color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"
                }
                col.push(code);
            }
            codeRainArr.push(col);
        }
    }

    //代码雨下起来
    function codeRaining() {
        //把画布擦干净
        ctx.clearRect(0, 0, cw, ch);
        //创建有颜色的画布
        //createColorCv();
        for (var n = 0; n < codeRainArr.length; n++) {
            //取出列
            col = codeRainArr[n];
            //遍历列，画出该列的代码
            for (var i = 0; i < col.length; i++) {
                var code = col[i];
                if (code.y > ch) {
                    //如果超出下边界则重置到顶部
                    code.y = 0;
                } else {
                    //匀速降落
                    code.y += code.speed;
                }
                
                //1 颜色也随机变化
                //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 

                //2 绿色逐渐变浅
                // ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)"; 

                //3 绿色随机
                // var r= 0;
                // var g= parseInt(Math.random()*255) + 3;
                // var b= 0;
                // ctx.fillStyle = "rgb("+r+','+g+','+b+")";

                //4 一致绿
                ctx.fillStyle = code.color;


                //把代码画出来
                ctx.fillText(code.text, code.x, code.y);
            }
        }
        requestAnimationFrame(codeRaining);
    }

    //创建代码雨
    createCodeRain();
    //开始下雨吧 GO>>
    requestAnimationFrame(codeRaining);
</script>
   
</body>
</html>

更多代码雨的文章请参考我的其它文章：

“代码雨”js+css+html实现：https://blog.csdn.net/u014597198/article/details/71423269

收起

展开全文

Canvas 代码雨，像下雨一样
2018-07-03 15:30:05

用canvas制作，让代码像下雨一样，下啊、下啊、下啊。

收起
aaaaa代码雨.html
2021-05-06 22:29:33

帝国代码雨

收起

“代码雨”js+css+html实现

万次阅读 多人点赞 2017-05-08 16:09:18

HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css"> <title>code by-zhenyu.sha</tit...

先看看效果：

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/ok.css">
<title>code by-zhenyu.sha</title>
</head>

<body>
<canvas id="canvas"></canvas>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://neilcarpenter.com/demos/canvas/matrix/stats.min.js"></script>
<script type="text/javascript" src="js/ok.js"></script>
</html>

js代码：

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
      window[vendors[x] + 'CancelRequestAnimationFrame'];
  }
  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());
// stats
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
var M = {
  settings: {
    COL_WIDTH: 20,
    COL_HEIGHT: 25,
    VELOCITY_PARAMS: {
      min: 4,
      max: 8
    },
    CODE_LENGTH_PARAMS: {
      min: 20,
      max: 40
    }
  },
  animation: null,
  c: null,
  ctx: null,
  lineC: null,
  ctx2: null,
  WIDTH: window.innerWidth,
  HEIGHT: window.innerHeight,
  COLUMNS: null,
  canvii: [],
  font: '30px matrix-code',
  letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'],
  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; i++) {
      M.codes[i] = [];
      M.codes[i][0] = {
        'open': true,
        'position': {
          'x': 0,
          'y': 0
        },
        'strength': 0
      };
    }
    M.loop();
    M.createLines();
    M.createCode();
    // not doing this, kills CPU
    // M.swapCharacters();
    window.onresize = function() {
      window.cancelAnimationFrame(M.animation);
      M.animation = null;
      M.ctx.clearRect(0, 0, M.WIDTH, M.HEIGHT);
      M.codesCounter = 0;
      M.ctx2.clearRect(0, 0, M.WIDTH, M.HEIGHT);
      M.WIDTH = window.innerWidth;
      M.HEIGHT = window.innerHeight;
      M.init();
    };
  },
  loop: function() {
    M.animation = requestAnimationFrame(function() {
      M.loop();
    });
    M.draw();
    stats.update();
  },
  draw: function() {
    var velocity, height, x, y, c, ctx;
    // slow fade BG colour
    M.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    M.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT);
    M.ctx.globalCompositeOperation = 'source-over';
    for (var i = 0; i < M.COLUMNS; i++) {
      // check member of array isn't undefined at this point
      if (M.codes[i][0].canvas) {
        velocity = M.codes[i][0].velocity;
        height = M.codes[i][0].canvas.height;
        x = M.codes[i][0].position.x;
        y = M.codes[i][0].position.y - height;
        c = M.codes[i][0].canvas;
        ctx = c.getContext('2d');
        M.ctx.drawImage(c, x, y, M.settings.COL_WIDTH, height);
        if ((M.codes[i][0].position.y - height) < M.HEIGHT) {
          M.codes[i][0].position.y += velocity;
        } else {
          M.codes[i][0].position.y = 0;
        }
      }
    }
  },
  createCode: function() {
    if (M.codesCounter > 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; j++) {
      text = M.codes[i][j];
      newCtx.globalCompositeOperation = 'source-over';
      newCtx.font = '30px matrix-code';
      if (j < 5) {
        newCtx.shadowColor = 'hsl(104, 79%, 74%)';
        newCtx.shadowOffsetX = 0;
        newCtx.shadowOffsetY = 0;
        newCtx.shadowBlur = 10;
        newCtx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')';
      } else if (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 < M.HEIGHT) {
      M.ctx2.moveTo(0, linesYBlack);
      M.ctx2.lineTo(M.WIDTH, linesYBlack);
      linesYBlack += 5;
    }
    M.ctx2.lineWidth = 0.15;
    M.ctx2.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    while (linesYWhite < M.HEIGHT) {
      M.ctx2.moveTo(0, linesYWhite + 1);
      M.ctx2.lineTo(M.WIDTH, linesYWhite + 1);
      linesYWhite += 5;
    }
    M.ctx2.stroke();
  },
  assignColumn: function() {
    var randomColumn = M.randomFromInterval(0, (M.COLUMNS - 1));
    if (M.codes[randomColumn][0].open) {
      M.codes[randomColumn][0].open = false;
    } else {
      return false;
    }
    return randomColumn;
  },
  randomFromInterval: function(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
  },
  snapshot: function() {
    window.open(M.c.toDataURL());
  }
};
function eventListenerz() {
  var controlToggles = document.getElementsByClassName('toggle-info');
  var controls = document.getElementById('info');
  var snapshotBtn = document.getElementById('snapshot');
  function toggleControls(e) {
    e.preventDefault();
    controls.className = controls.className === 'closed' ? '' : 'closed';
  }
  for (var j = 0; j < 2; j++) {
    controlToggles[j].addEventListener('click', toggleControls, false);
  }
  snapshotBtn.addEventListener('click', M.snapshot, false);
}
window.onload = function() {
  M.init();
  eventListenerz();
};

css代码：

@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;
}

更多代码雨的文章，请参考我的其它文章：

“代码雨”纯HTML源码实现及效果：https://blog.csdn.net/u014597198/article/details/71412881

收起

展开全文

css

代码流星雨
2018-08-13 15:16:51

在DW中用html写的代码流星雨，简单实用，可以收藏一下

收起
代码雨JavaScript模板
2020-08-16 18:55:28

本资源有详细讲解和...资源内含有三个文件,一个html作为首页模板,一个js为动效,一个css为配置文件,类似于普通黑客帝国的代码雨,比较好看,可以用在一些深色调的主题上,兼具科技感,不需要积分,免费分享给大家玩玩,哈哈

收起
HTML5数字雨代码
2016-02-25 16:52:50

模仿黑客帝国数字雨效果，采用HTML5画图功能

收起
HTML5下雨加闪电动画场景特效特效代码
2021-03-20 00:40:43

HTML5下雨加闪电动画场景特效是一款基于HTML5 Canvas绘制的电闪雷鸣暴风雨动画特效。

收起

HTML代码雨fdyad

html代码雨.7z

黑客帝国代码雨HTML

黑客帝国代码雨html

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

黑客帝国代码雨html特效

HTML满屏华丽代码雨

HTML5编写的代码雨

流星雨代码.html

黑客帝国-代码雨.html

html5手机端抢红包雨代码

HTML5流星雨动画背景特效特效代码

用HTML制作代码雨源码分享

黑客帝国代码雨.bat

代码雨 html版绿色字体保证完美

黑客帝国代码雨.html

黑客帝国代码雨HTML5特效

黑客帝国代码雨（HTML）

前端代码雨（html+js+css）.rar

JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

“代码雨”纯HTML源码实现及效果

Canvas 代码雨，像下雨一样

aaaaa代码雨.html

“代码雨”js+css+html实现

代码流星雨

代码雨JavaScript模板

HTML5数字雨代码

HTML5下雨加闪电动画场景特效特效代码

html代码雨

HTML代码雨fdyad

html代码雨.7z

黑客帝国代码雨HTML

黑客帝国代码雨html

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

黑客帝国代码雨html特效

HTML满屏华丽代码雨

HTML5编写的代码雨

流星雨代码.html

黑客帝国-代码雨.html

html5手机端抢红包雨代码

HTML5流星雨动画背景特效特效代码

用HTML制作代码雨源码分享

黑客帝国代码雨.bat

代码雨 html版 绿色字体 保证完美

黑客帝国代码雨.html

黑客帝国代码雨HTML5特效

黑客帝国 代码雨（HTML）

前端 代码雨（html+js+css）.rar

JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

“代码雨”纯HTML源码实现及效果

Canvas 代码雨，像下雨一样

aaaaa代码雨.html

“代码雨”js+css+html实现

代码流星雨

代码雨JavaScript模板

HTML5数字雨代码

HTML5下雨加闪电动画场景特效特效代码

html代码雨

代码雨 html版绿色字体保证完美

黑客帝国代码雨（HTML）

前端代码雨（html+js+css）.rar