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

正常情况

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

相关推荐
代码搬运媛1 天前
Jest 测试框架详解与实现指南
前端
counterxing1 天前
我把 Codex 里的 Skills 做成了一个 MCP,还支持分享
前端·agent·ai编程
wangqiaowq1 天前
windows下nginx的安装
linux·服务器·前端
之歆1 天前
DAY_12JavaScript DOM 完全指南(二):实战与性能篇
开发语言·前端·javascript·ecmascript
发现一只大呆瓜1 天前
Vite凭什么这么快?3分钟带你彻底搞懂 Vite 热更新的幕后黑手
前端·面试·vite
Maimai108081 天前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
kyriewen1 天前
产品经理把PRD写成“天书”,我用AI半小时重写了一遍,他当场愣住
前端·ai编程·cursor
humcomm1 天前
元框架的工作原理详解
前端·前端框架
canonical_entropy1 天前
Attractor Before Harness: AI 大规模开发的方法论
前端·aigc·ai编程
zhangxingchao1 天前
多 Agent 架构到底怎么选?从 Claude Agent Teams、Cognition/Devin 到工程落地原则
前端·人工智能·后端