live2d 快速实现好看的看板娘特效

第一种：直接引用下方文件，实现简单的看板娘效果；

https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json   

<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-shizuku@1.0.5/assets/shizuku.model.json", "scale": 1 },
        "display": { "position": "left", "width": 150, "height": 300, "hOffset": 0, "vOffset": -20 },
        "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 }
    });
</script>

 

第二种：

  页首Html代码：

<!-- 左下角live2d 看板娘 -->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/jerque/flat-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/jerque/waifu.css"/>

博客侧边栏公告

<!-- 左下角live2d 看板娘(支持换肤等) -->
<div class="waifu" id="waifu">
  <div class="waifu-tips" style="opacity: 1;"></div>
  <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="waifu-tool">
        <span class="fui-home"></span>
        <span class="fui-chat"></span>
        <span class="fui-eye"></span>
        <span class="fui-user"></span>
        <span class="fui-photo"></span>
        <span class="fui-info-circle"></span>
        <span class="fui-cross"></span>
    </div>
</div>

<script src="https://blog-static.cnblogs.com/files/jerque/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/jerque/waifu-tips.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">initModel()</script>

 

参考：https://www.cnblogs.com/yjlaugus/p/8724881.html#/c/subject/p/8724881.html