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 天前
nvm安装Node后node -v正常,npm -v提示“无法加载文件”问题解决
前端·npm·node.js
Sapphire~1 天前
【前端基础】03- .stop VS .prevent
前端
zsd_311 天前
npm指定本地缓存、安装包、仓库路径
前端·缓存·npm·node.js·私服·安装包·本地
半个开心果1 天前
vue3项目结构里的hooks 和utils
前端·javascript·vue.js
HXH_csdn1 天前
浏览器版本低,使用?.语法导致页面白屏
前端·javascript·vue.js
鹏程十八少1 天前
3. Android 腾讯开源的 Shadow,凭什么成为插件化“终极方案”?
android·前端·面试
VT.馒头1 天前
【力扣】2627. 函数防抖
前端·javascript·算法·leetcode
IT_陈寒1 天前
Vite 4.0实战:5个被低估的配置项让构建速度提升50%
前端·人工智能·后端
消失的旧时光-19431 天前
数据驱动 vs 流程驱动:前端与 Flutter 的两种架构主线
前端·数据驱动·流程驱动·架构思想
2501_918126911 天前
国标麻将一抽胡
前端·学习·html·个人开发