<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.name{
font-size: 40px;
color: #000;
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 120px);
}
</style>
</head>
<body>
<script charset="utf-8" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script>
<script>
// L2Dwidget.init({
// "model": {jsonPath:"https://cdn.jsdelivr.net/gh/cn-night-ray/live2d-widget-models@1.0/packages/live2d-widget-model-shizuku/assets/shizuku.model.json","scale": 1 },
// // "model": {jsonPath:"https://unpkg.zhimg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json","scale": 1 },
// // "model": {jsonPath:"https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json","scale": 1 },
// // 其他类型参考 live2dw 下文件夹中的 json 文件名 或者使用下面注释的代码（在谷歌浏览器有跨域问题，跨域使用火狐）
// // "model": {jsonPath:"./live2dw/live2d-widget-model-chitose/assets/chitose.model.json","scale": 1 },
// "display": { "position": "left", "width": 300, "height": 600,"hOffset": 0, "vOffset": -20 },
// "mobile": { "show": true, "scale": 1 },
// "react": { "opacityDefault": 1, "opacityOnHover": 1 } });
L2Dwidget.init({
"model": {jsonPath:"https://cdn.jsdelivr.net/gh/cn-night-ray/live2d-widget-models@1.0/packages/live2d-widget-model-z16/assets/z16.model.json","scale": 1 },
"display": {
"superSample": 1.2,
"width": 200,
"height": 380,
"position": "right",
"hOffset": 0,
"vOffset": -32
}
});
</script>
</body>
</html>