给WordPress添加一个小猫咪

桑先生

发布于 2019-12-17 20:53:13

1.2K2

发布于 2019-12-17 20:53:13

文章被收录于专栏：桑先生的专栏桑先生的专栏

之前逛大佬们博客的时候经常发现会有个小萝莉.还挺好玩的.无奈自己不懂前端.

加上个人对于那种二次元的东西还不是感冒.所以就放弃了养妹妹.之前逛了不知道哪位的博客.在左下角放了个猫咪.感觉这猫不错.无奈博主没有讲方法.也是来也匆匆.去也匆匆.

机缘巧合之下,在朋友圈找到了云吸猫的方法.

经了解.小萝莉也好,小猫咪也罢以上这种效果都是使用Live2D技术实现的，Live2D是一种应用于电子游戏的绘图渲染技术，由日本Cybernoids公司开发，通过一系列的连续图像和人物建模来生成一种类似二维图像的三维模型，换句话说就是2D的素材实现一定程度的3D效果.

科普完毕.接下来开始科学云养猫

首先下载需要的文件,解压到你的站点注意路径地址.

百度网盘打开链接：https://pan.baidu.com/s/1QWIcMDysvxpAkXLVhoFb1g 提取码：chtd

接下来你只需要把文件夹拷贝到你的项目下，然后将以下Js添加合适的位置就可以云吸猫了.

<script src="/live2d/L2Dwidget.min.js"></script>
<script type="text/javascript">
  L2Dwidget.init({
    model: {
      jsonPath: '/live2d/tororo/assets/tororo.model.json',
    },
    display: {
      superSample: 2,
      width: 150,
      height: 150,
      position: 'right',
      hOffset: 0,
      vOffset: 0,
    },
    mobile: {
      show: true,
      scale: 1,
      motion: true,
    },
    react: {
      opacityDefault: 0.8,
      opacityOnHover: 0.2,
    }
  })
</script>

model： 指定model.json位置

display： 控制live2d模型在页面上显示的位置

mobile： 控制手机上是否显示

react： 控制显示的透明度

这样就可以开始云吸猫了 ?

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

react