Live2D嵌入前端页面

废话不多说,直接看效果,给页面中嵌入的一个动态的二次元人物,美化页面,实际效果自行查看。

教程开始

一. 把项目拉取到本地

项目地址 自行下载到本地,下载方式自行选择。

二.把项目文件夹放到前端页面目录内

三.把下面的代码嵌入到HTML页面内

复制代码
<link rel="stylesheet" href="/live2d/css/live2d.css" />
<link rel="stylesheet" href="/live2d/css/waifu.css" />

<script type="text/javascript" src="live2d/js/jquery.min.js"></script>
<script type="text/javascript" src="live2d/js/live2d.js"></script>
<script type="text/javascript" src="live2d/js/waifu-tips.js"></script>
<script type="text/javascript">
initWidget({
	waifuPath: "/live2d/waifu.json",
	cdnPath: "/live2d/"
});
</script>

路径一定要改成自己的!!! 根据自己的项目结构自行修改。

路径一定要改成自己的!!! 根据自己的项目结构自行修改。

路径一定要改成自己的!!! 根据自己的项目结构自行修改。

四.

启动时要以服务端形式启动,例如vscode,使用live-server插件启动页面,不然控制台会报错,会出现资源找不到。

正常情况

也是感觉自己做的页面单调,想着美化一下,顺手做个教程,有问题请留言。

相关推荐
卸任8 小时前
Vibe coding工具使用心得
前端·ai编程
brien99 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance9 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M9 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写9 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李9 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易9 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马10 小时前
前沿视界
前端
kyriewen10 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易10 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员