博客前端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%">

这样就能显示了：