• 日期: 2026-06-16
  • 标签: 程序员

〇、效果如本页的背景所示，黑客帝国的字幕

一、本功能需要开通博客园的JS权限

二、在博客设置 页脚HTML代码 贴入如下代码


<div><canvas id="matrixBG" >canvas>div>
<script src="https://files.cnblogs.com/files/batsing/matrix.js">script>
<script>
$(function(){
    let ua = navigator.userAgent.toLowerCase();
    if( ua.indexOf("mobile")<0 ){
      window.onload = function(){
        let matrix = new MatrixBG("matrixBG", 2);
      }
    }
});
script>

其中引入的 matrix.js 是已封装好的核心代码，引入的关键是

let matrix = new MatrixBG("matrixBG", 2);

其中，matrixBG 是标签的id，后面的2是指用第2类背景字符，彝文。matrix.js内置了三种字符，1是注音字符，2是彝文，3是英文数字。可以自行测试不同文字的效果，我目前偏好彝文的效果，如果需要更多的字符可以自行下载修改代码添加，如藏文、蒙古文、梵文等。

特别安利一下彝族歌手约里（一朵云乐队）的歌，好听又有民族风格，另外彝族海来阿木的歌也不错。

四、在 页面定制CSS代码 贴入如下代码

body {
    background: url("//photo.tuchong.com/1019978/f/21914120.jpg") fixed center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#matrixBG{
    position: fixed; top:0; left: 0; 
    z-index: -1;
    animation: fade8 3s infinite;
}
@keyframes fade8 {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.8;
    }
}

body添加了一张背景图，是广东省博物馆的夜景照片，暗红色作为背景，增加氛围感。

#matrixBG是黑客帝国背景主体，其中 z-index: -1; 为了让他在博客内容下层，不要遮挡博客内容，另外添加一个类呼吸灯的动画效果，与省博的暗红背景配合。

 


原文地址: https://www.cveoy.top/t/topic/qGTc 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录