高仿黑客帝国网页特效!
修改后页面顶部加入font-awesome导航连接

请输入图片描述

代码

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>黑客帝国</title>
        <style type="text/css">
            html,body{width: 100%;height: 100%;}
            body{
                background: #000;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
          a{ text-decoration:none} /*去除链接下划线*/
          a:link {color: #FF0000 !important} /*设置全局未点击链接的颜色*/
          a:visited {color: #FF0000 !important} /*设置全局被点击后的链接颜色*/
          a:hover {color: #00FF00 !important} /*设置全局鼠标悬停在链接上未点击时的颜色*/
          a:active {color: #FFFF00 !important} /*设置全局鼠标在点击链接瞬间发生的动作*/
        </style>
      <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
      <div class="list-group" align="center">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首页</a>丨
  <a class="list-group-item" href="#"><i class="fa fa-archive fa-fw" aria-hidden="true"></i>&nbsp; 归档</a>丨
  <a class="list-group-item" href="#"><i class="fa fa-commenting-o fa-fw" aria-hidden="true"></i>&nbsp; 关于我</a>
       </div>
        <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;
                        }
                        //颜色也随机变化
                        //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 

//绿色逐渐变浅

//ctx.fillStyle = "hsl(123,30%,"+(30-i*2)+"%)"; 


//绿色随机
//var r= 0;
//var g= parseInt(Math.random()*255) + 3;
//var b= 0;
//ctx.fillStyle = "rgb("+r+','+g+','+b+")"
ctx.fillStyle = code.color;
                        //把代码画出来
                        ctx.fillText(code.text,code.x,code.y);
                    }
                }
                requestAnimationFrame(codeRaining);
            }

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

另外一种没有阴影源码

<!DOCTYPE html>
<html>
    <head>
          <title>黑客帝国效果</title>
        <meta charset="utf-8">
              <style type="text/css">
            html,body{width: 100%;height: 100%;}
            body{
                background: #000;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
          a{ text-decoration:none} /*去除链接下划线*/
          a:link {color: #FF0000 !important} /*设置全局未点击链接的颜色*/
          a:visited {color: #FF0000 !important} /*设置全局被点击后的链接颜色*/
          a:hover {color: #00FF00 !important} /*设置全局鼠标悬停在链接上未点击时的颜色*/
          a:active {color: #FFFF00 !important} /*设置全局鼠标在点击链接瞬间发生的动作*/
        </style>
      <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
        <div class="list-group" align="center">
  <a class="list-group-item" href="http://huw.me"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首页</a>丨
  <a class="list-group-item" href="http://huw.me"><i class="fa fa-archive fa-fw" aria-hidden="true"></i>&nbsp; 归档</a>丨
  <a class="list-group-item" href="http://huw.me"><i class="fa fa-commenting-o fa-fw" aria-hidden="true"></i>&nbsp; 关于我</a>
       </div>
    <canvas id="canvas"></canvas>
    <style type="text/css">
body{margin: 0; padding: 0; overflow: hidden;}
</style>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');


        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        var texts = '0123456789abcdefghijklmnopqrstuvwxyz'.split('');

        var fontSize = 16;
        var columns = canvas.width/fontSize;
        // 用于计算输出文字时坐标,所以长度即为列数
        var drops = [];
        //初始值
        for(var x = 0; x < columns; x++){
            drops[x] = 1;
        }

        function draw(){
            //让背景逐渐由透明到不透明
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            //文字颜色
            ctx.fillStyle = '#0F0';
            ctx.font = fontSize + 'px arial';
            //逐行输出文字
            for(var i = 0; i < drops.length; i++){
                var text = texts[Math.floor(Math.random()*texts.length)];
                ctx.fillText(text, i*fontSize, drops[i]*fontSize);

                if(drops[i]*fontSize > canvas.height || Math.random() > 0.95){
                    drops[i] = 0;
                }

                drops[i]++;
            }
        }

        setInterval(draw, 33);
</script>
</body>
<html>

我不是代码的创造者,我只是代码的搬运工!