zoukankan      html  css  js  c++  java
  • 博客园添加Live2d看板娘

    最近给自己的博客添加了个动态的小萝莉,给大家分享一下,效果请见我的博客左下角:

    (当然你也可以在自己的html页面引入下面的js来添加小萝莉)

     1.首先最重要的一点你要申请一个博客园账号。

     2.其次申请js权限,找到管理--》设置》--》js权限申请(博客园为了防止大家随便引入js,申请时要说明自己的用途哟,大概一天时间会通过)。

     3.权限通过之后,然后在【页脚html代码】编辑器中插入如下代码

       引入live2d的相关js

    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    

     初始化js加载我们可爱的小萝莉:

    <script>
        L2Dwidget.init({
            "model": {
           //jsonpath控制显示那个小萝莉模型,下面这个就是我觉得最可爱的小萝莉模型 jsonPath:
    "https://unpkg.com/live2d-widget-model-chitose@latest/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中的live2d-widget-model-chitose和chitose.model.json中的chitose来修改小萝莉,

    替换的小萝莉效果可以参考这里,点我(引用下大佬的链接,笔芯)

    • 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
  • 相关阅读:
    appium 与 selenium python解决python 'WebElement' object does not support indexing 报错问题问题
    selenium自动化测试在富文本中输入信息的方法
    selenium+python自动化测试,上传文件怎样实现
    selenium+python编写自动化脚本时,定位frame中对象操作
    Ubuntu下NDK环境搭建以及使用
    android游戏开发之AndEngine引擎效率优化
    Google Analytics 电子商务跟踪 同一根域 设置跨域跟踪时使用
    使用“Google 翻译”工具实现多语言版网站
    php-APC介绍
    php连接memcahed出现Cannot assign requested address (99)的解决方法
  • 原文地址:https://www.cnblogs.com/barryzhang/p/10535960.html
Copyright © 2011-2022 走看看