zoukankan      html  css  js  c++  java
  • 博客园设置黑客帝国背景和小女孩插件

    博客园->我的博客->管理->设置:

    一、申请js权限

    二、页面定制css代码:

    #matrix{position: fixed; top:0; left: 0; z-index: -1; opacity:0.8;}
    canvas#live2dcanvas {
    border: 0 !important;
    left: 0;
    }

    三、页首html代码:

    <canvas id="matrix"></canvas>
    <script type="text/javascript">
    
        //文字
        var txts = "0123456789!@#$%^&*()~_+℃☆○※";
        //转为数组
        txts = txts.split("");
        var matrix=document.getElementById("matrix");
        var context=matrix.getContext("2d");
        matrix.height=window.innerHeight;
        matrix.width=window.innerWidth;
        var drop=[];
        var font_size=16;
        var columns=matrix.width/font_size;
        for(var i=0;i<columns;i++)
            drop[i]=1;
    
        function drawMatrix(){
    
            context.fillStyle="rgba(0, 0, 0, 0.09)";
            context.fillRect(0,0,matrix.width,matrix.height);
    
    
            context.fillStyle="green";
            context.font=font_size+"px";
            for(var i=0;i<columns;i++){
                //随机取要输出的文字
                var text = txts[Math.floor(Math.random()*txts.length)];
                //输出文字,注意坐标的计算
                context.fillText(text,i*font_size,drop[i]*font_size);/*get 0 and 1*/
    
                if(drop[i]*font_size>(matrix.height*2/3)&&Math.random()>0.95)/*reset*/
                    drop[i]=0;
                drop[i]++;
            }
        }
        setInterval(drawMatrix,33);
    </script>

    四、页脚html代码(小女孩插件)

    <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
    <script type="text/javascript">
                    L2Dwidget.init();
    </script>

    OK,打完收工。

  • 相关阅读:
    牛儿
    Tarjan算法
    There&nbsp;is&nbsp;no&nbsp;resul…
    Struts2+JQuery+Json登陆实例
    struts2+jquery+easyui+datagrid+j…
    Spring:JdbcTemplate使用指南
    使用Spring的jdbcTemplate进一步简…
    JDBC连接MySQL数据库及示例
    PLSQL导入/导出数据方法
    PLSQ创建用户L
  • 原文地址:https://www.cnblogs.com/steveshao/p/11754148.html
Copyright © 2011-2022 走看看