部落格前端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%">      

這樣就能顯示了：      

作者：紫陌紅塵丶

出處：https://www.cnblogs.com/yukarin/

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，部落客在此感謝！