我的博客园定制页面 烟花点击+看板娘+音乐播放器+黑客帝国背景+小火箭
需要开启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; width: 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%; width: 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{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: 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