如何向自己网页中养一只猫🐱
本篇文章教大家如何给自己的网页添加一个动态模型。
使用插件
WordPress
小白-白酱的插件(22&33 模型):https://moedog.org/946.html
DaiDR 酱的插件(Pio 模型):https://daidr.me/archives/code-176.html
Typecho
泽泽酱的插件(22&33 模型):https://qqdie.com/archives/l2d233.html
保罗酱的插件(Pio 模型):https://paugram.com/coding/add-poster-girl-with-plugin.html
Emlog
广树酱的插件(伊斯特瓦尔模型):https://www.wikimoe.com/?post=75
Z-Blog
FGHRSH 酱的插件(Pio&Tia 模型):https://www.fghrsh.net/post/123.html
不使用插件
如果你的网站没有使用有现成插件的框架,可以直接将代码写入 jsp
依赖类库
<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-hijiki/assets/hijiki.model.json",<!--这里改模型,前面后面都要改-->
"scale": 1
},
"display": {
"position": "left",<!--设置猫猫的上下左右位置-->
"width": 100,
"height": 200,
"hOffset": 0,
"vOffset": 0
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,<!--设置透明度-->
"opacityOnHover": 0.2
}
});
window.onload = function(){
$("#live2dcanvas").attr("style","position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
}
</script>
使用浏览器插件在任何网页上都显示
安装插件:https://www.tampermonkey.net/
安装脚本:live2D 看板娘
说明
GitHub 源码:https://github.com/fghrsh/live2d_demo
参考文档:
Live2D demo
网页添加 Live2D 看板娘
给网页添加能动的看板娘(Live2D)-将其添加到网页上吧