live2d 快速實現好看的看板娘特效
阿新 • • 發佈：2021-09-13
第一種：直接引用下方檔案，實現簡單的看板娘效果；
https://unpkg.com/[email protected]/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({第二種： 頁首Html程式碼："model": { jsonPath: "https://unpkg.com/[email protected]/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>
<!--左下角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