Single

博客页面添加动态小人(给博客添加二次元人物方法)

为了美化浏览界面,咱们可使用博客第三方小人插件
咱们只须要将如下代码添加到博客园的
博客侧边栏公告<在设置里面>(支持HTML代码) (支持 JS 代码)

就能够实现博客里面的小人效果了
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
  <!--小帅哥: https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json-->
  <!--萌娘:https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json-->
  <!--小可爱(女):https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json-->
  <!--小可爱(男):https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json-->
  <!--初音:https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json-->
   <!-- 上边的不一样连接显示的是不一样的小人,这个能够根据须要来选择 下边的初始化部分,能够修改宽高来修改小人的大小,或者是鼠标移动到小人上的透明度,也能够修改小人在页面出现的位置。 -->
  <script>
    /*https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json*/
    L2Dwidget.init({ "model": { jsonPath:
          "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
        "scale": 1 }, "display": { "position": "right", "width": 110, "height": 150,
        "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
      "react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });
  </script>

效果图(右下角部分)

小可爱

初音

 

喵娘json

  1. {"type":"Live2D Model Setting","name":"shizuku","model":"moc/shizuku.moc","textures":["moc/shizuku.1024/texture_00.png","moc/shizuku.1024/texture_01.png","moc/shizuku.1024/texture_02.png","moc/shizuku.1024/texture_03.png","moc/shizuku.1024/texture_04.png","moc/shizuku.1024/texture_05.png"],"physics":"shizuku.physics.json","pose":"shizuku.pose.json","expressions":[{"name":"f01","file":"exp/f01.exp.json"},{"name":"f02","file":"exp/f02.exp.json"},{"name":"f03","file":"exp/f03.exp.json"},{"name":"f04","file":"exp/f04.exp.json"}],"layout":{"center_x":0,"y":1.2,"width":2.4},"hit_areas":[{"name":"head","id":"D_REF.HEAD"},{"name":"body","id":"D_REF.BODY"}],"motions":{"idle":[{"file":"mtn/idle_00.mtn","fade_in":2000,"fade_out":2000},{"file":"mtn/idle_01.mtn","fade_in":2000,"fade_out":2000},{"file":"mtn/idle_02.mtn","fade_in":2000,"fade_out":2000}],"tap_body":[{"file":"mtn/tapBody_00.mtn","sound":"snd/tapBody_00.mp3"},{"file":"mtn/tapBody_01.mtn","sound":"snd/tapBody_01.mp3"},{"file":"mtn/tapBody_02.mtn","sound":"snd/tapBody_02.mp3"}],"pinch_in":[{"file":"mtn/pinchIn_00.mtn","sound":"snd/pinchIn_00.mp3"},{"file":"mtn/pinchIn_01.mtn","sound":"snd/pinchIn_01.mp3"},{"file":"mtn/pinchIn_02.mtn","sound":"snd/pinchIn_02.mp3"}],"pinch_out":[{"file":"mtn/pinchOut_00.mtn","sound":"snd/pinchOut_00.mp3"},{"file":"mtn/pinchOut_01.mtn","sound":"snd/pinchOut_01.mp3"},{"file":"mtn/pinchOut_02.mtn","sound":"snd/pinchOut_02.mp3"}],"shake":[{"file":"mtn/shake_00.mtn","sound":"snd/shake_00.mp3","fade_in":500},{"file":"mtn/shake_01.mtn","sound":"snd/shake_01.mp3","fade_in":500},{"file":"mtn/shake_02.mtn","sound":"snd/shake_02.mp3","fade_in":500}],"flick_head":[{"file":"mtn/flickHead_00.mtn","sound":"snd/flickHead_00.mp3"},{"file":"mtn/flickHead_01.mtn","sound":"snd/flickHead_01.mp3"},{"file":"mtn/flickHead_02.mtn","sound":"snd/flickHead_02.mp3"}]}}

 

 

 

 

一、如何使用

在这里插入图片描述

代码如下(示例):

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>

<!– L2Dwidget.js L2D网页动画人物 –>
<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@1.0.5/assets/hijiki.model.json”, “scale”: 1, “hHeadPos”:0.5, “vHeadPos”:0.618 },
“display”: { “position”: “right”, “width”: 400, “height”: 400, “hOffset”: 0, “vOffset”: 0 },
“mobile”: { “show”: true, “scale”: 0.5 },
“react”: { “opacityDefault”: 0.7, “opacityOnHover”: 0.2 }
});
</script>
<!–
其他可选的模型:
小帅哥: https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
萌娘:https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
白猫:https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
黑猫: https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
小可爱(女):https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
小可爱(男):https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
初音:https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
圣职者妹妹:https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
茶杯犬:https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
绿毛妹妹:https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json
金龟子妹妹:https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json
https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json
小阿狸: https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json
https://unpkg.com/live2d-widget-model-nietzche@1.0.5/assets/nietzche.model.json
https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
女学生: https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json
–>
</head>
<body>

</body>
</html>

形象参考地址

点击这里查看形象

点击显示文字 演示站

live-2d

https://github.com/EYHN/hexo-helper-live2d/blob/HEAD/README.zh-CN.md

总结

小人自定义之类的可以参考官网做法:
https://www.npmjs.com/package/hexo-helper-live2d
官网
git源码地址可以下载很多种
git源码https://gitcode.net/explore
技术使用:L2Dwidget.min.js

药水制作师 Pio 和 Kia

下面还可参考以下内容

模型 https://paugram.com/coding/add-poster-girl-with-plugin.html#title-4

梦象模型站

live2d用法

给博客增加动态看板娘

支持更换模型的 Live2D 插件https://docs.paul.ren/pio/#/

博客通用版:https://www.wikimoe.com/?post=76

wordpress版 https://www.wikimoe.com/?post=104

typecho版  https://www.wikimoe.com/?post=97 

演示站

wordpress版http://typecho.wikimoe.com/wp/

typecho版http://typecho.wikimoe.com/

 

https://zhuanlan.zhihu.com/p/349278862

 

https://moedog.org/946.html

 

康娜(Kanna)

插图版权归原作及版权公司所有。模型作者:oukaitou
模型出处:Live2DViewer 创意工坊
版权要求:禁止商业使用

下载地址

百度云 提取码:e2bp
百度云 提取码:1212 感谢群友:万年枫雪

WordPress 插件 (22&33)

下载地址:

单 33 单服装版本:
https://github.com/xb2016/33-live2d-wp

2233 可换装版本:
https://github.com/xb2016/poster-girl-l2d-2233

模型下载

整理了一些:加藤惠,纱雾,康纳,真白,伊斯特瓦尔,蕾姆等

https://odrive.aptx.xin/Live2D/Live2D.zip

 

 

 

插图

暂无评论

发表评论
/* logo扫光 */ .navbar-brand headerlogo{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.headerlogo navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 5s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}} //文本复制监听,右上弹窗提示 .toast-top-right { top: 72px; right: 12px; } .toast-success { background-color: #7486E7; }