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插件启动页面,不然控制台会报错,会出现资源找不到。

正常情况

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

相关推荐
码视野几秒前
基于 Vue3 + Element Plus 的【青少年心理健康智能测评与 AI 情绪树洞陪护干预系统】设计与实现(含PRD/三端源码/大屏)
前端·vue.js·人工智能·vue3
专业抄代码选手2 分钟前
03|React 为什么需要协调:比较两棵树,而不是重建页面
前端·javascript·react.js
灯澜忆梦4 分钟前
【基于GO的Web开发11】gin获取URL‑Path 路径参数
前端·后端·golang·html·gin
王霸天5 分钟前
GLB 文件太大怎么办?我把它从 47MB 压到 8MB,全程没碰命令行
前端·javascript·程序员
半个落月5 分钟前
Next.js 16 笔记应用实战:Redis 数据链路与组件两版拆分详解
前端·redis·next.js
YIAN6 分钟前
告别等后端!React+Vite 前端独立开发全流程:接口封装 + Mock 方案 + 状态管理
前端·react.js·vite
PedroQue9910 分钟前
@meng-xi/vite-plugin v1.3.0:generateUni 一键流水线
前端·vite
胡萝卜术10 分钟前
权限系统的四道防线:从数据库事务锁到操作级保护规则的完整设计
前端·javascript·面试
IMPYLH10 分钟前
HTML 的 <legend> 元素
java·前端·html
真夜14 分钟前
RN热更新安全问题
前端·react native