具体效果我就不多说了，看见我的首页相信你们就知道了，好了闲话不多说直接上我的源码（不过大家还是都换换背景和一些样式好点一下，毕竟太多人用一样的也不大好）！
下面是我花了2天在各个网络资源整合后写出来的东西，看完记得 点赞，关注哦！！！
css代码:
#c{ position: fixed; top:0; left: 0; z-index:-1; opacity:0.8; } * { margin: 0; padding: 0; border: 0; } #div_digg1 { padding: 5px; position: fixed; _position: absolute; z-index: 1000; bottom: 5%; left: 3.5%; _left: 15px; border: 0; } body { color: #000; background-color: #e6e6e6; font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; } #home { border-radius: 18px; margin: 0 auto; width: 80%; min-width: 750px; background-color: #fff; background-image: url(//images.cnblogs.com/cnblogs_com/xiaolubin/1480308/o_322741.jpg); background-attachment: fixed; padding: 30px; margin-top:50px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); opacity: 0.9; } #sideBar { font-size: 12px; border-radius: 18px; margin: 0 auto; background-color: #fff; background-attachment: fixed; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); opacity: 0.7; } <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
（备注：#home中的background-image: url(//images.cnblogs.com/cnblogs_com/xiaolubin/1480308/o_322741.jpg);是自己设置的背景，可以在自己的博客园内的图片上传中，上传自己喜欢的图片再获取它的网络链接替换就好，opacity: 0.9;为透明度设置）
首页html代码：
<!-- 添加首页标题 --> <p style="text-align:center;font-size:35px;margin-bottom:5px;margin-top:20px;opacity: 0.8;color:#00ff00;">欢迎来到小苏的博客</p> <!--动态码流背景 --> <script type="text/javascript" src="https://blog-static.cnblogs.com/files/Steven-Tim/hk01.js" ></script> <!-- 动态断点式图 --> <script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="https://blog-static.cnblogs.com/files/xiaolubin/canvas-nest.js"></script> <!-- 点击时出现小心心 --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> var a_idx = 0;jQuery(document).ready(function($) {$("body").click(function(e) {var a = new Array("可爱的", "傻帽", "无聊", "哎", "单身汪", "歪?在吗", "小伙计" ,"程序猿", "狗粮", "？？", "干哈", "没毛病");var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 100000000,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "#ff6651"});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function() {$i.remove();});});}); </script> <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <canvas id="c"></canvas> <!-- 添加音乐播放器音乐可以自己选择src的网易云内的音乐链接 --> <script type="text/javascript"> var iii = document.createElement('iframe'); iii.src = '//music.163.com/outchain/player?type=2&id=32465166&auto=1&height=66'; iii.height = 86; iii.width=280; $("#bfq").after(iii); </script>
页脚html代码:
<!-- 音乐播放器的位置 --> <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/[email protected]/assets/z16.model.json", "scale": 1 }, "display": { "position": "right", //看板娘的表现位置 "width": 170, //小萝莉的宽度 "height": 300, //小萝莉的高度 "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 }, "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } }); </script>
（
备注:
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
上面这些是看板娘的人物模型，jsonpath控制显示那个小萝莉模型的，
更换模型时直接替换live2d-widget-model-z16，于此同时还要更改z16.model.json中的z16 (这是我遇到的坑！害我多花了1小时~~~~)
jsonPath: "https://unpkg.com/[email protected]/assets/z16.model.json",
）
同时分享一些我浏览过的道友的链接希望对各位有所帮助，
这个和博客园好像没什么关系，是建立自己服务器的看板娘模型，有兴趣可以去看看
https://mx-model.ga/
这个是选择看板娘的人物模型的链接一个大佬的网站，大家可以去看看
https://huaji8.top/post/live2d-plugin-2.0/
这个是一个道友对看板娘的分享，我也还在看，大家可以看看，不错的文章
https://www.cnblogs.com/yjlblog/p/8724881.html?utm_source=gold_browser_extension
希望感觉我的分享有帮助的人可以点个赞哇，关注关注哇，我后续还会有更多的分享，相信不会让你们失望的！！！