看板娘demo，学会了可以方便的给自己的博客添加一个看板娘

文件下载

由于文件代码有点多所以，放一个网盘链接

链接：https://pan.baidu.com/s/1qiFDWN-bMzq6zKpytvuzeA
提取码：ajcm

demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Live2D</title><link rel="stylesheet" type="text/css" href="./assets/waifu1.css" /><link rel="stylesheet" type="text/css" href="./assets/flat-ui.min.css" /><!-- 使用下面的两个可以实现一种  github地址 https://github.com/stevenjoezhang/live2d-widget --><!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"><script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script> --></head><body><div class="waifu" id="waifu"><div class="waifu-tips" style="opacity: 1;"></div><canvas id="live2d" width="280" height="250" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span><span class="fui-chat"></span><span class="fui-eye"></span><span class="fui-user"></span><span class="fui-photo"></span><span class="fui-info-circle"></span><span class="fui-cross"></span></div></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script src="./assets/live2d.js"></script><script src="./assets/waifu-tips.js"></script><script type="text/javascript">initModel()</script>
</body></html>

文件目录

结果

用这种方法请配合这篇文章使用本地测试demo时看板娘的图片显示不出来，解决办法

第二种不用下载文件

这个也可以，用起来还行，直接引用别人 cdn 的文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Live2D</title><!-- 使用下面的两个可以实现一种  github地址 https://github.com/stevenjoezhang/live2d-widget --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"><script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script></head><body></body></html>

效果

最后碎碎念

两种办法都可以实现换装，换人，拍照，建议自己都玩玩看看效果，第二种方法，建议自己去把代码下载下来，放到自己的 cdn 上，免得别人的突然没了

看板娘demo，学会了可以方便的给自己的博客添加一个看板娘相关推荐

3行代码为网站博客添加萌萌哒看板娘可爱二次元女动漫玩偶人物
看板娘一词源自日语"看板娘(かんばんむすめ)".其中的"看板"指的是店面招牌,或者是为了宣传.打广告而制作的宣传牌."看板娘"也就是店面的招 ...
Hexo 博客添加 3D 看板娘替换原来的 Live2D
0.前言前两天用 VRoid Studio 捏了一个 3D 的 loli ,后来想想能不能把这个 3D 形象替换到那个博客站点的原来的 Live2D 看板娘那边去.花了一上午时间在 GitHub 上 ...
如何给自己的个人博客添加一个呆萌的live-2d博客精灵/看板娘
live2d看板娘一览图 1. 引入live-2d相关js  <script src="https://eqcn.ajz.miesnf ...
WordPress博客添加看板娘
效果如下: WordPress博客添加看板娘(送37套服饰) 1. 从我的github下载压缩包该压缩包已经自带37套服饰.支持换装功能.支持经典动漫台词展示.未来还会支持钉宫日语50音发声喔~ ...
给你的网页添加看板娘（以给博客园博客添加看板娘为例）（保姆级图文）
步骤系列文章前言 1.下载看板娘资源 2.上传资源到文件 3.在设置中调用资源 4.看看效果总结系列文章提示:转到日常小技巧专栏,观看更多内容! 点我直达–>日常小技巧专栏前言给你 ...
Hexo 博客添加看板娘
Hexo 博客添加看板娘相信看到这里的小伙伴都有属于自己的hexo博客了吧,废话不多说,我们直接进入主题我的博客:传送门 1.安装模块在hexo根目录下用Git执行命令 npm install ...
(三) 给你的博客添加看板娘(Live2D)HEXO+icarus
HEXO+icarus主题给博客添加看板娘(Live2D) 最近在很多博客左下角或者右下角有看到小人(看板娘),折腾了一番搜到的都没有达到预期的效果,并且大多数教程都是基于Next来做的,本人使用的 ...
【分享】给自己的博客园添加一个板娘（可选）
全部样式分享更换模型的话只需要更换jsonpath中的模型名称即可 https://unpkg.com/live2d-widget-model-模型名称/assets/模型名称.model.json ...
如何给博客添加看板娘详解（面向新手）
1.在我的博客页面,点击"管理",进入博客园后台. 2.选择"文件",从本地上传四个文件 flat-ui.min.css (看板娘的侧边选项栏) live2d. ...

看板娘demo，学会了可以方便的给自己的博客添加一个看板娘

文件下载

demo

文件目录

结果

第二种不用下载文件

效果

最后碎碎念

看板娘demo，学会了可以方便的给自己的博客添加一个看板娘相关推荐

最新文章

热门文章