首页 > 基础资料 博客日记

给博客加入黑客帝国背景字幕

2026-06-16 11:30:02基础资料围观26次

文章给博客加入黑客帝国背景字幕分享给大家，欢迎收藏极客资料网，专注分享技术知识

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

一、本功能需要开通博客园的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 是<canvas>标签的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.cnblogs.com/batsing/p/20562520
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：Event-Driven Agent 实战：Prometheus 告警 → LLM → Tool Calling → 自动恢复
下一篇：程序员和软件还有前途吗 —— 从 NocoBase 收入再翻倍谈起

相关文章

最新发布

点击排行

本站推荐

标签云