首页 > 分享 > 为自己的网站中添加一个live2d“萌宠”

为自己的网站中添加一个live2d“萌宠”

最新推荐文章于 2024-09-30 15:40:29 发布

冰河世纪Icer 于 2018-08-15 22:10:36 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

在网页中添加一个Live2d,主要是在文件中添加head文件的css引用和body中js脚本的引用;

1、将资源文件解压到网站源码文件夹内;

2、打开当前模板或主页的head部分;添加CSS引用;在<head>...</head>之间随便找一个非注释位置插入都可以;

<link rel="stylesheet" type="text/css" href="https://www.eleraptor.com/zb_users/theme/filmlee/template/live2D/waifu.css"/>  <!--  看板娘-->

红色位置是live2d的文件夹路径,绝对路径和相对路径都可以;

3、在网页body或footer部分进行js引用,在当前希望出现的页面调用php文件中,插入一下代码;

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

<script src="https://www.eleraptor.com/zb_users/theme/filmlee/template/live2D/waifu-tips.js"></script>

<script src="https://www.eleraptor.com/zb_users/theme/filmlee/template/live2D/live2d.js"></script>

<script type="text/javascript">initModel("/")</script>

红色部分对应自己的文件路径;

live2d文件下载   点击下载   1v9i

--资源来自网络,若有侵权请联系删除!

相关知识

为自己的网站中添加一个live2d“萌宠”
Unity 制作萌系live2d桌宠:屏幕自适应+交互
hexo 给自己的博客添加萌宠或萌妹子
hexo博客添加Live2D小宠物
Hexo添加宠物
探索萌宠动物乐园商品查询网站,为您的宠物生活增添无限乐趣
Hexo+yilia添加helper
神奇的萌宠乐园游戏(快乐萌宠游戏)
养一只博客宠物
萌宠乐园网站(快乐萌宠乐园)

网址: 为自己的网站中添加一个live2d“萌宠” https://m.mcbbbk.com/newsview665991.html

所属分类:萌宠日常
上一篇: 手机QQ超级萌宠自动培养
下一篇: 萌宠驾到!不平凡的婚礼看得心都化