本套live2d提供换装,而且拥有37套衣服. 效果就类似是本站这个,为啥说类似,因为本站布局问题,我改了适配本站。
操作开始:
下载下面的live2d.zip
文件,然后解压到你的站点目录。
打开你的主题文件夹,打开header.php
文件,在<head>
与</head>
标签中插入下列代码:
<link rel="stylesheet" href="/live2d/css/live2d.css" />
打开主题目录下的footer.php
文件,拉到最底下,在</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 class="switch-button">换装</div> </div> <script type="text/javascript"> var message_Path = '/live2d/'; var home_Path ='https://www.ecyqz.com' ; //此处修改为你的域名,必须带斜杠 </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"> var index = Math.ceil(Math.random()*37); loadlive2d("live2d", live2d_Path+"/model/pio/model_"+index+".json"); </script>
打开网站会在右下角出现看板娘(本站为了适应本站主题,就调整过了):
如果你也想调整,可以在live2d文件中css/live2d.css
中调整大小、位置等。
鼠标放到看板娘上会出现换装和隐藏按钮,点击看板娘就会出现消息框。喜欢的快去部署吧。