发现好多的博客页面上有这样一个看板娘,非常的讨人喜欢,于是自己就尝试将其添加入网页。
效果图:
首先下载资源并解压:https://www.lanzous.com/i5xllwh
双击live2d.html,这就是一个已经弄好的示例网页。(暂时还没有换装/换人物的一些功能)
用编辑器打开网页源码
这一段是需要引用的css:
<link rel="stylesheet" href="live2d/css/live2d.css" />
这一段是body中需要添加的元素:
<div id="landlord">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="hide-button">隐藏</div>
</div>
这一段是在body尾部需要引用的javascript资源:
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>//添加jquery环境(必须)
<script type="text/javascript">
var message_Path = 'https://6dduu6.github.io/live2d/' //message.js的目录(必须填写,否则无法加载交互的文字)
var home_Path = 'https://6dduu6.github.io/' //网站的根目录
</script>
<script type="text/javascript" src="live2d/js/live2d.js"></script>
<script type="text/javascript" src="live2d/js/message.js"></script>
<script type="text/javascript">
loadlive2d("live2d", "https://6dduu6.github.io/live2d/model/pio/model.json"); //model.json和其模型等都需要放在服务器网站上
</script>
把这些代码加在所要添加的网页上的对应位置就行了。
建议把资源丢到自己的服务器或github网站中,引用自己的资源地址!!
学习自:
https://blog.csdn.net/kids_calamus/article/details/82719896
https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
我的github:https://github.com/6DDUU6/6DDUU6.github.io/
示例网站:https://6dduu6.github.io/live2d.html