看板娘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 上，免得别人的突然没了
