<!--黑客帝国背景,移动端不加入--> <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添加了一张背景图,是广东省博物馆的夜景照片,暗红色作为背景,增加氛围感。