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

yuday 2020-02-19 17:46 

当我们平时游览某些网站时,我们发现网站上总是漂浮着一个可爱的小人物,并且它还可以通过各种方式与用户互动。通常,此类效果是通过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 内的服装字段,达到随机服装的效果。

发表评论


表情