【2024最新博客美化教程重置版】在网页中使用L2Dwidget二次元可动人物前端插件,让动漫美女伴随你左右!

极客小俊

于 2024-04-12 15:44:06 发布

阅读量1.5k

点赞数 18

分类专栏：博客专区文章标签： L2Dwidget免费插件二次元人物插件 javascript 网页美化免费教程前端开发插件 github

本文链接：https://blog.csdn.net/windowsxp2018/article/details/137683186

版权

博客专区专栏收录该内容

9 篇文章

订阅专栏

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

L2Dwidget 二次元可动人物前端插件 🔥

我们其实还可以通过如何直接在博客或前端html网页上添加L2D网页二次元可动人物来美化我们的页面!

主要是使用L2Dwidget.js

参考文档

官方文档 https://github.com/EYHN/hexo-helper-live2d/blob/HEAD/README.zh-CN.md

快速使用方法:

首先我们要引入L2Dwidget.js插件

https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js

也可以直接复制以下代码到html页面中即可

代码如下

<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            "jsonPath": "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
            "scale": 1
        },
        "display": {
            "position":"right",
            "width": 300,
            "height": 500,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.8,
            "opacityOnHover": 0.1
        }
    });
</script>

根据自己的喜好去设置参数，比如可以修改宽高width和height来显示人物的大小，或者是鼠标移动到人物上的透明度，也可以修改人物在页面出现的位置. 这些就看自己的喜好了!

效果如下

模型人物切换

其实修改模型人物也很简单，在参数设置中我们找到model下面的jsonPath参数

例如:

"model": {
    "jsonPath": "https://unpkg.com/模型名称@1.0.5/assets/miku.model.json",
    "scale": 1
},

也就是这一段配置代码, 比如说当前的模型要设置为live2d-widget-model-miku，

那么则将以上代码的模型名称更换为live2d-widget-model-miku 就可以了!

而且模型有很多,大家也可以直接复制地址也可以, 我经常使用的是如下几个模型:

如下表:

名称	配置地址
小帅哥	https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
萌娘	https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
小可爱（女）	https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
小可爱（男）	https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
初音	https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
黑猫	https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
白猫	https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
狗子	https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
小护士	https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json