博客园看版娘添加(live2d)

1、引用

在【页脚HTML代码】中添加

<!--看板娘,右下角live2d效果-->
<script type="text/javascript" charset="utf-8" async="" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>

2、添加配置

在【页脚HTML代码】中添加

<script type="text/javascript">
//黑猫
var hijiki="https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json";
//白猫 
var tororo="https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json";
//狗
var wanko="https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json";
//人物
var koharu="https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json";
var shizuku="https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json";//默认形象
var z16="https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json";
var chitose="https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json";
var haruto="https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json";
var hibiki="https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json";
var izumi="https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json";
var miku="https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json";
var nico="https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json";
var nipsilon="https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json";
var nito="https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json";
var tsumiki="https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json";
var unitychan="https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json";
setTimeout(() => {
  L2Dwidget.init({
    "model": {
      jsonPath:z16,//形象
      "scale": 0.5
    },
    "display": {
      "position": "right",//展示位置
      "width": 120,//看板娘宽
      "height": 225,//看板娘高
      "hOffset": 0,
      "vOffset": -20
    },
    "mobile": {
      "show": true,
      "scale": 0.5
    },
    "react": {
      "opacityDefault": 0.7,
      "opacityOnHover": 0.2
    }
  });  
}, 1000)
</script>

上述js中延时主要是为了等待资源加载完毕,以避免找不到L2Dwidget 对象引起报错

3、样式

看板娘添加后会有一个默认的边框,所以需要在【页面定制CSS代码】中添加样式以隐藏边框

#live2dcanvas {
    border: 0 !important;
}

4、效果展示

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值