给网站添加Live2D看板娘多个人物模型切换不同服饰更可爱!

Live2D的出现主要还是被应用于游戏当中,他可以使得平面图形可以像三维图形一样小幅度活动,给网站添加Live2D看板娘也是近期比较流行的一件事情,尤其是博客网站几乎大部分都会选择添加Live2D看板娘来增加网站的活力,从而使得网站更具有吸引力,这样做的好处就是大幅减少了网站的跳出率,一定程度上来讲,对网站优化未尝不是一件好事!

给网站添加Live2D看板娘多个人物模型切换不同服饰更可爱!
给网站添加Live2D看板娘多个人物模型切换不同服饰更可爱!

目前Live2D的流行使得许多CMS都有了相应的插件,例如Wordpress、Typecho、Zblog都有相应的Live2D看板娘插件,但这些插件无一例外的都有一种短板,那就是人物模型与服饰只有一种或是比较少,如果想要更多的人物模型只能从网上下载后上传到Live2D的模型文件夹中比较麻烦,而且如果一些没有插件的网站想要添加也是一件比较繁琐的事情.

这里为大家提供个代码给网站添加Live2D看板娘的方法,比较简单,可以说只要熟悉HTML代码的网站建设人员几乎都可以添加,其优点是添加方法简单,并且提供了Live2D看板娘的多个人物模型切换,可以给同一个人物模型换装不同的服装,不仅如此还可以对所喜爱的Live2D看板娘进行拍照功能非常强大,废话不多说,下面给大家正式介绍如何给网站添加Live2D看板娘!

第一步、下载安装包 将安装包解压并将 assets 文件夹上传到网站根目录

给网站添加Live2D看板娘多个人物模型切换不同服饰更可爱!
给网站添加Live2D看板娘多个人物模型切换不同服饰更可爱!

第二步、将以下代码加入到</body>

<div class="waifu">
        <div class="waifu-tips"></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>
	<link rel="stylesheet" type="text/css" href="assets/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>    
    <script src="assets/waifu-tips.js"></script>
    <script src="assets/live2d.js"></script>
    <script type="text/javascript">initModel("assets/")</script>

第三步、清除网站缓存,刷新网站就可以看到一个可爱的Live2D看板娘呈现在你的网站左下角了.

给网站添加Live2D看板娘多个人物模型切换不同服饰更可爱!
给网站添加Live2D看板娘多个人物模型切换不同服饰更可爱!

操作说明:

1.小房子图标可以返回首页

2.对话图标可以与Live2D看板娘对话

3.眼睛图标可以切换Live2D看板娘角色模型

4.人物图标可以更改当前Live2D看板娘角色 衣服

5.感叹号图标显示 有关Live2D看板娘的信息

6.X号图标可以关闭左下角Live2D看板娘

下载链接:https://wwa.lanzous.com/iow6Oeemm8f 密码:6e7p

未经允许不得转载:西德SEO » 给网站添加Live2D看板娘多个人物模型切换不同服饰更可爱!

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏