我的博客园定制页面 烟花点击+看板娘+音乐播放器+黑客帝国背景+小火箭

需要开启js权限

页面定制 CSS 代码

#matrixBG{position: fixed; top:0; left: 0; z-index: -1; opacity:0.3;}



div{
line-height: 1;  /*设置行间距*/
}

/设置代码框为黑底白字/
.cnblogs_code pre {
font-family: Courier New!important;
font-size: 15px!important;
word-wrap: break-word;
white-space: pre-wrap;
}

.cnblogs_code span {
font-family: Courier New!important;
font-size: 15px!important;
line-height: 1.5!important;
color: #FFFAFA !important;;
}

.cnblogs_code {
background-color: #2e3131;
font-family: Courier New!important;
font-size: 12px!important;
box-shadow: 10px 10px 5px #888888;
padding: 3px;
overflow: auto;
margin: 2px 0;
color: #FFFAFA !important;;
}

.cnblogs_code div {
background-color: #2e3131;
}



/*黑客帝国背景CSS样式*/
#matrixBG{
    position: fixed; 
    top:0;
    left: 0;
    z-index: -1; 
    opacity:0.8;
}

　　

博客侧边栏公告（支持HTML代码） （支持 JS 代码）

<!-- 小火箭-->
<script src="https://blog-static.cnblogs.com/files/pythonywy/jQuery1.7.js"></script>
<style type="text/css">

    /*回到顶部*/
    #rocket-to-top div {
        left: 0;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        top: 0;
         149px;
    }

    #rocket-to-top .level-2 {
        background: url("https://images.cnblogs.com/cnblogs_com/pythonywy/1455951/o_redhuojian2.png") no-repeat scroll -149px 0 transparent;
        display: none;
        height: 250px;
        opacity: 0;
        z-index: 1;
    }

    #rocket-to-top .level-3 {
        background: none repeat scroll 0 0 transparent;
        display: block;
        height: 150px;
        z-index: 2;
    }

    #rocket-to-top .level-3:hover {
        cursor: url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_huo3.png), auto;
    }

    #rocket-to-top .level-3:active {
        cursor: url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_huo1.png), auto;
    }

    #rocket-to-top .level-3:focus {
        cursor: url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_huo2.png), auto;
    }

    #rocket-to-top {
        background: url("https://images.cnblogs.com/cnblogs_com/pythonywy/1455951/o_redhuojian2.png") no-repeat scroll 0 0 transparent;
        cursor: default;
        display: block;
        height: 250px;
        margin: -125px 0 0;
        overflow: hidden;
        padding: 0;
        position: fixed;
        left: -40px;
        top: 90%;
         149px;
        z-index: 11;
    }
</style>
<div style="display: none;" id="rocket-to-top">
    <div style="opacity:0;display: block;" class="level-2"></div>
    <div class="level-3"></div>
</div>
<script>
    $(function () {
        var e = $("#rocket-to-top"),
            t = $(document).scrollTop(),
            n,
            r,
            i = !0;
        $(window).scroll(function () {
            var t = $(document).scrollTop();
            t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
                    marginTop: "-1000px"
                },
                "normal",
                function () {
                    e.css({
                        "margin-top": "-125px",
                        display: "none"
                    }),
                        i = !0
                })) : e.fadeIn("slow")
        }),
            e.hover(function () {
                    $(".level-2").stop(!0).animate({
                        opacity: 1
                    })
                },
                function () {
                    $(".level-2").stop(!0).animate({
                        opacity: 0
                    })
                }),
            $(".level-3").click(function () {
                function t() {
                    var t = e.css("background-position");
                    if (e.css("display") == "none" || i == 0) {
                        clearInterval(n),
                            e.css("background-position", "0px 0px");
                        e.css("cursor", "url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_huo1.png), auto");
                        return
                    }
                    switch (t) {
                        case "0px 0px":
                            e.css("background-position", "-298px 0px");
                            break;
                        case "-298px 0px":
                            e.css("background-position", "-447px 0px");
                            break;
                        case "-447px 0px":
                            e.css("background-position", "-596px 0px");
                            break;
                        case "-596px 0px":
                            e.css("background-position", "-745px 0px");
                            break;
                        case "-745px 0px":
                            e.css("background-position", "-298px 0px");
                    }
                }

                if (!i) return;
                n = setInterval(t, 50),
                    $("html,body").animate({scrollTop: 0}, "slow");
            });
    });
</script>



</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
<img src="https://pic.cnblogs.com/avatar/2114977/20200802105658.png" alt="Penn000" class="img_avatar" width="210px" height="210px" style="border-radius:10%">
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>



 
<!-- 音乐播放器的位置 -->
<div id="div_digg1" align="center"><p id="bfq" ></p></div>

<script src="https://l2dwidget.js.org//lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget
.on('*', (name) => {
console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')
})
.init({
dialog: {
enable: true,
script: {
'every idle 5s': '$hitokoto$',
'hover .star': '星星在天上而你在我心里 (*/ω＼*)',
'tap body': '哎呀！别碰我！',
'tap face': '人家已经不是小孩子了！'
}
},
"model": {
<!-- jsonpath控制显示那个小萝莉模型 -->
jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json", 
"scale": 1
},
"display": {
"position": "right", //看板娘的表现位置
"width": 160, //小萝莉的宽度
"height": 350, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>

　　

页首 HTML 代码

/*网易云音乐播放器*/ 
<iframe frameborder="0" border="1" 
            marginwidth="0" marginheight="0" 
            width=100% height=77 
            src="//music.163.com/outchain/player?type=2&id=501821&auto=1&height=66">
    </iframe>　　　　　　　　　　　　　　　　　　　　　　　　　/*此处id = 里的值即为音乐的id，id在网易云音乐url里，手机版或者pc软件里选择分享，生成链接*/


<!-- 背景动画 -->
<script type="text/javascript" color="0,0,255" opacity='0.4' zIndex="-1" count="199" src="https://files.cnblogs.com/files/lfri/canvas-nest.js">
</script>

<!--黑客帝国背景HTML-->
<div id="page_end_html">
<div><canvas id="matrixBG" ></canvas></div>
</div>


<!--黑客帝国JS样式-->
<script >
// JavaScript Document
$(document).ready(function(){
//var s=window.screen;
var width = matrixBG.width = window.screen.width;
var height = matrixBG.height = window.screen.height;
var yPositions = Array(300).join(0).split('');
var ctx=matrixBG.getContext('2d');
var fonts1 = "我真帅";
var fonts2 = "我好帅啊";
var fonts3 = "我是天才";  /*自定义滚动的文字*/
var fonts = fonts1 + fonts2 + fonts3;
//var fonts="12345AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz67890";
//console.log( fonts );

var draw = function () {
  ctx.fillStyle='rgba(0,0,0,.05)';
  ctx.fillRect(0,0,width,height);
  ctx.fillStyle='#0F0';
  ctx.font = '10pt Georgia';
//  ctx.font = '10pt Nano';
  yPositions.map(function(y, index){
//    text = String.fromCharCode(30+Math.floor( Math.random()*95 ));
    var rand = Math.floor( Math.random()* fonts.length );
    var text = fonts.substr( rand, 1);
    x = (index * 10)+10;
    matrixBG.getContext('2d').fillText(text, x, y);
    if(y > 100 + Math.random()*1e4)
    {
      yPositions[index]=0;
    }
    else
    {
      yPositions[index] = y + 10;
    }
  });
};
RunMatrix();
function RunMatrix()
{
    if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
            Game_Interval = setInterval(draw, 33);
}
function StopMatrix()
{
    clearInterval(Game_Interval);
}
/**
//setInterval(draw, 33);
$("button#pause").click(function(){
StopMatrix();});
$("button#play").click(function(){RunMatrix();});
*/
});


</script>

页脚 HTML 代码

<style>
.text-popup {
    animation: textPopup 1s;
    color: red;
    user-select: none;
    white-space: nowrap;
    position: absolute;
    z-index: 99;
}
@keyframes textPopup {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);    
    }
}
</style>

<script>
var fnTextPopup = function (arr, options) {
    // arr参数是必须的
    if (!arr || !arr.length) {
        return;    
    }
    // 主逻辑
    var index = 0;
    document.documentElement.addEventListener('click', function (event) {
        var x = event.pageX, y = event.pageY;
        var eleText = document.createElement('span');
        eleText.className = 'text-popup';
        this.appendChild(eleText);
        if (arr[index]) {
            eleText.innerHTML = arr[index];
        } else {
            index = 0;
            eleText.innerHTML = arr[0];
        }
        // 动画结束后删除自己
        eleText.addEventListener('animationend', function () {
            eleText.parentNode.removeChild(eleText);
        });
        // 位置
        eleText.style.left = (x - eleText.clientWidth / 2) + 'px';
        eleText.style.top = (y - eleText.clientHeight) + 'px';
        // index递增
        index++;
    });    
};

fnTextPopup(   /*这里设定弹出的文字*/
['富强','民主','文明','和谐','自由','平等','公正','法治','爱国','敬业','诚信','友善']);

(function(window,document,undefined){
    var hearts = [];
    
    window.requestAnimationFrame = (function(){
        return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         function (callback){
             setTimeout(callback,1000/60);
         }
    })();
    
    init();

    function init(){
        css(".heart{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
        attachEvent();
        gameloop();
    }

    function gameloop(){
        for(var i=0;i<hearts.length;i++){
            if(hearts[i].alpha <=0){
                document.body.removeChild(hearts[i].el);
                hearts.splice(i,1);
                continue;
             }

             hearts[i].y--;
             hearts[i].scale += 0.004;
             hearts[i].alpha -= 0.013;
             hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
        }

        requestAnimationFrame(gameloop);
    }

    function attachEvent(){
        var old = typeof window.onclick==="function" && window.onclick;
        window.onclick = function(event){
            old && old();
            createHeart(event);
        }
    }

    function createHeart(event){
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
            el : d,
            x : event.clientX - 5,
            y : event.clientY - 5,
            scale : 1,
            alpha : 1,
            color : randomColor()
        });

        document.body.appendChild(d);
    }

    function css(css){
        var style = document.createElement("style");
        style.type="text/css";
        try{
            style.appendChild(document.createTextNode(css));
        }
        catch(ex){
            style.styleSheet.cssText = css;
        }

        document.getElementsByTagName('head')[0].appendChild(style);
    }

   
    
})(window,document);


</script>


<script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
 <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

　　

看板娘

https://www.cnblogs.com/xiaolubin/p/11014789.html

里面也有看板娘的其它模型

如果你想在桌面上显示看板娘

可以去HBuilder X的插件市场搜索  彩虹屁老婆，有一百多个人物模型和语音包

https://ext.dcloud.net.cn/plugin?id=2157

网易云外链播放器教程

https://www.cnblogs.com/yuan2333/p/7244380.html