給WordPress添加一個小貓咪

  • 2019 年 12 月 17 日
  • 筆記

之前逛大佬們部落格的時候經常發現會有個小蘿莉.還挺好玩的.無奈自己不懂前端.

加上個人對於那種二次元的東西還不是感冒.所以就放棄了養妹妹.之前逛了不知道哪位的部落格.在左下角放了個貓咪.感覺這貓不錯.無奈部落客沒有講方法.也是來也匆匆.去也匆匆.

機緣巧合之下,在朋友圈找到了雲吸貓的方法.

經了解.小蘿莉也好,小貓咪也罷以上這種效果都是使用Live2D技術實現的,Live2D是一種應用於電子遊戲的繪圖渲染技術,由日本Cybernoids公司開發,通過一系列的連續影像和人物建模來生成一種類似二維影像的三維模型,換句話說就是2D的素材實現一定程度的3D效果.

科普完畢.接下來開始科學雲養貓

首先下載需要的文件,解壓到你的站點注意路徑地址.

百度網盤打開 鏈接https://pan.baidu.com/s/1QWIcMDysvxpAkXLVhoFb1g  提取碼:chtd

接下來你只需要把文件夾拷貝到你的項目下,然後將以下Js添加合適的位置就可以雲吸貓了.

<script src="/live2d/L2Dwidget.min.js"></script>  <script type="text/javascript">    L2Dwidget.init({      model: {        jsonPath: '/live2d/tororo/assets/tororo.model.json',      },      display: {        superSample: 2,        width: 150,        height: 150,        position: 'right',        hOffset: 0,        vOffset: 0,      },      mobile: {        show: true,        scale: 1,        motion: true,      },      react: {        opacityDefault: 0.8,        opacityOnHover: 0.2,      }    })  </script>

model: 指定model.json位置

display: 控制live2d模型在頁面上顯示的位置

mobile: 控制手機上是否顯示

react: 控制顯示的透明度

這樣就可以開始雲吸貓了 ?