博客園動態背景實現，看板娘實現，音樂播放器實現 ，優美背景 實現-------大綜合

具體效果我就不多說了，看見我的首頁相信你們就知道了，好了閑話不多說直接上我的源碼（不過大家還是都換換背景和一些樣式好點一下，畢竟太多人用一樣的也不大好）！
下面是我花了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/live2d-widget-model-z16@1.0.5/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/live2d-widget-model-z16@1.0.5/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

希望感覺我的分享有幫助的人可以點個贊哇，關注關注哇，我后續還會有更多的分享，相信不會讓你們失望的！！！