精华内容
下载资源
问答
  • 简易代码雨特效
    千次阅读
    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编写
  • 黑客帝国代码雨html

    2021-10-28 21:31:51
    使用html实现黑客帝国代码雨
  • 最近学习了HTML,今天写个HTML代码雨,然后下面用HTML和js也写了一个,给自己留点笔记 先看看效果 1、绿色: 2、彩色: 3、背景色: 4、绿色逐渐变浅: 源代码: <!DOCTYPE html> <html>   <head&...
  • 黑客帝国代码雨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手机端抢红包雨代码,打开页面,红包随机飘落,点击查看中奖情况。
  • HTML5流星动画背景特效是一款带有搜索框的流星背景动画特效。
  • <!DOCTYPE HTML> <html> <head> ...meta charset="utf-8" />...代码雨</title> <!-- CSS样式 --> <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>

    效果如下:

     

    展开全文
  • 黑客帝国代码雨.bat

    2020-10-02 11:44:29
    黑客帝国代码雨代码,打开就运行。黑客帝国代码雨代码,打开就运行。黑客帝国代码雨代码,打开就运行。黑客帝国代码雨代码,打开就运行。黑客帝国代码雨代码,打开就运行。
  • 代码雨
  • 黑客帝国代码雨.html

    2021-01-25 01:31:57
    转自g55zhw93 (ง •̀_•́)ง 的代码雨网页代码
  • 黑客帝国代码雨HTML5特效是一款酷炫的全屏动画背景代码。
  • 很酷的代码HTML,适合初学者学习
  • 本资源包含一个完整的由html+css+js实现的前端代码雨展示片段,需要的朋友可以下载哦!!!!!!!!!!!!!!!!!!!!!!!!
  • 主要介绍了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制作,让代码像下雨一样,下啊、下啊、下啊。
  • 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

    展开全文
  • 代码流星

    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下雨加闪电动画场景特效是一款基于HTML5 Canvas绘制的电闪雷鸣暴风动画特效。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,675
精华内容 12,670
关键字:

html代码雨