博客前端live2D實現

1、本來以為沒那么簡單，結果看了大佬的https://www.cnblogs.com/liuzhou1/p/10813828.html#4431992的簡單明了。效果如下，可隨鼠標移動。

①這里添加在博客側邊欄公告（支持HTML代碼） （不支持 JS 代碼的向管理員申請）；

js代碼

<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
     L2Dwidget.init({"display": {
         "superSample": 2,
         "width": 200,
         "height": 400,
              "position": "right",
                  "hOffset": 0,
         "vOffset": 0
           }
      });
</script>

在這里我們需要引入兩個教室L2Dwidget.0.min.js和L2Dwidget.min.js。這兩個js你可以從我的頁面直接拿走。

②這段添加在css里，放最底下就行；

css代碼

#live2dcanvas {
    border: 0 !important;
}

2、實現之后發現一個問題，頭像沒法顯示了，似乎頭像是和公告關聯的，live2D覆蓋了頭像導致；百度了下直接在html里添加一段即可：

<img src="https://images.cnblogs.com/cnblogs_com/yukarin/1639008/o_200129105929%E7%B4%AB%E5%A6%B963296370_p0.jpg" width="200px" style="border-radius:50%">

這樣就能顯示了：