给网站加上个live2d可爱卡通动画人物特效

当我们平时游览某些网站时，我们发现网站上总是漂浮着一个可爱的小人物，并且它还可以通过各种方式与用户互动。通常，此类效果是通过js加载渲染出来的，非常的讨人喜欢，于是我们可以尝试将其添加入自己的网页中。

初步的效果图

准备工作

首先得获取https://pan.baidu.com/s/1wp_z5luzciX2wlqM1L46AQ 提取码: ku9w ，下载整理后的 Live2D 代码压缩包

下载后解压代码到你的网站根目录去。（目录位置可以自定义）

操作步骤

用编辑器打开你网站程序头部文件（header）引入界面css样式，在 head 标签内插入如下代码：

    <link rel="syslesheet" href="/live2d/css/live2d.css">

（如果你使用的是wordpress程序，添加路径为wp-content\themes\主题\header.php）

在 body 标签内合适的位置插入 Live2D卡通小人物的元素代码，按照 Html 书写规范写 ~

<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>

在你网站程序页脚文件（footer）引入javascript脚本，在 body 标签结束前插入如下代码：

<script type="text/javascript"><br />
    var message_Path = '/live2dw/js/message.js/'<br />
    var home_Path = 'http://xxx.com/' //此处修改为你的域名<br />
</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"><br />
    loadlive2d("live2d", "/live2dw/model/pio/model.json");<br />
</script>

换装/换人物的一些功能不在本文范畴内，有深入研究的朋友自行谷歌或百度，其实，就是动态改变 model.json 内的服装字段，达到随机服装的效果。

本文由Yuday分享 | 专注互联网科技分享 发布 ，如需转载请注明出处。
作者： yuday
原文链接：给网站加上个live2d可爱卡通动画人物特效