不限制任何网站类型,在背景上放一只会动的猫!

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

本文来自投稿,不代表润语研究站立场,如若转载,请注明出处:https://www.runyu8.top/1025/.html