各种live2d看板娘
各种live2d看板娘
用法:直接复制
live2D <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
<script src="https://live2d.fghrsh.net/assets/1.4.2/jquery.min.js"></script>
<script src="https://live2d.fghrsh.net/assets/1.4.2/jquery-ui.min.js"></script>
<script src="https://live2d.fghrsh.net/assets/1.4.2/autoload.js"></script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/693306/waifu1.css"/>
<script src="https://blog-static.cnblogs.com/files/blogs/693306/jquery.min.js"></script>
<div class="waifu" id="waifu" style="left: 100px !important;>
<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/blogs/693306/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/blogs/693306/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/693306/flat-ui.min.css"/>
<!-- live2D -->
<script src="https://l2dwidget.js.org//lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget
.on('*', (name) => {console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')})
.init({
dialog: {
enable: true,
script: {
'every idle 5s': '$hitokoto$',
'hover .star': '星星在天上而你在我心里 (*/ω\*)',
'tap body': '哎呀!别碰我!',
'tap face': '人家已经不是小孩子了!'
}
},
"model": {
<!-- jsonpath控制显示看板娘模型 -->
jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
"scale": 1
},
"display": {
"position": "right", //看板娘的表现位置
"width": 170, //看板娘的宽度
"height": 300, //看板娘的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
"scale": 1
},
"display": {
"position": "right",
"width": 150,
"height": 300,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!--
初始化的jsonPath为: https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json
例如:https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
也可通过使用浏览器访问 https://unpkg.com/2D模型全名称@1.0.5/ 来查找对应的模型json地址,如https://unpkg.com/live2d-widget-model-chitose@1.0.5
2D模型全名称:
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
-->
参考博客:
https://www.cnblogs.com/lingyunvoid/p/beautify.html
https://www.cnblogs.com/dxdblog/p/10255503.html
本文作者:WuMin4
本文链接:https://www.cnblogs.com/WuMin4/p/18373436
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步