教你如何在博客或網站背景上放一只會動的貓！

很多時候我們想給網站加些特效，可是自己寫代碼太麻煩了；於是我們都會去找第三方庫。
就在昨天我刷博客看到有人背景上有一只貓咪🐱。當時我就很喜歡，於是我嘗試抓了一下源碼，功夫不負有心人，很輕松的抓到了“黑貓咪”源碼。記得曾經還看到過“白貓咪”所以果斷上CSDN搜了一番。折騰半天終於找到了白貓源碼。
先給我自己用上了，后來想着可能有些朋友也需要，於是我寫了這篇博客分享一下。
黑貓源碼

  <div id="page_end_html">
<!--看板娘 - 黑貓-->
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script>
      L2Dwidget.init({
        "model": {
          jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json", <!--這里改模型，前面后面都要改-->
          "scale": 1
        },
        "display": {
          "position": "left", <!--設置看板娘的上下左右位置-->
          "width": 100,
          "height": 200,
          "hOffset": 0,
          "vOffset": 0
        },
        "mobile": {
          "show": true,
          "scale": 0.5
        },
        "react": {
          "opacityDefault": 0.7, <!--設置透明度-->
          "opacityOnHover": 0.2
        }
      });
      window.onload = function() {
        $("#live2dcanvas").attr("style", "position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
      }
    </script>
  </div>

白貓咪源碼

<!--白小貓咪-->
<script src=" https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.0.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: " https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json" ,
"scale": 1
},
"display": {
"position": "right",
"width": 100,
"height": 200,
"hOffset": -20,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 1,
"opacityOnHover": 1
}
});
</script>

白貓咪效果看此站、黑貓咪效果看“木子科技站”。
有了代碼，我們只需要把它復制到和 中間任意地方即可，想要每個頁面都加上這種特效，只需要把這段代碼放到header或footer等其他公用文件中即可！