🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
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 |
基本上这几个模型完全足够你显摆了! 😈😈😈
模型人物设置到博客
那么如果我们要把这个人物加入到博客园
里面应该怎么办呢!
其实也很简单, 打开你自己的博客园
进入到后台
,点击设置
如图
然后往下拉,找到博客侧边栏公告
这个选项, 把之前的代码加入进去就可以了!
如图
最后点击保存,再到博客首页去看看效果吧!
如图
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看
的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇