教你如何在博客或网站背景上放一只会动的猫！

很多时候我们想给网站加些特效，可是自己写代码太麻烦了；于是我们都会去找第三方库。
就在昨天我刷博客看到有人背景上有一只猫咪🐱。当时我就很喜欢，于是我尝试抓了一下源码，功夫不负有心人，很轻松的抓到了“黑猫咪”源码。记得曾经还看到过“白猫咪”所以果断上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等其他公用文件中即可！