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

正常情况

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

相关推荐
永远的个初学者24 分钟前
图片优化 上传图片压缩 npm包支持vue(react)框架开源插件 支持在线与本地
前端·vue.js·react.js
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ25 分钟前
npm i / npm install 卡死不动解决方法
前端·npm·node.js
Kratzdisteln28 分钟前
【Cursor _RubicsCube Diary 1】Node.js;npm;Vite
前端·npm·node.js
杰克尼1 小时前
vue_day04
前端·javascript·vue.js
明远湖之鱼1 小时前
浅入理解跨端渲染:从零实现 React DSL 跨端渲染机制
前端·react native·react.js
悟忧2 小时前
规避ProseMirror React渲染差异带来的BUG
前端
小皮虾2 小时前
小程序云开发有类似 uniCloud 云对象的方案吗?有的兄弟,有的!
前端·javascript·小程序·云开发
Android疑难杂症2 小时前
鸿蒙Notification Kit通知服务开发快速指南
android·前端·harmonyos
T___T2 小时前
全方位解释 JavaScript 执行机制(从底层到实战)
前端·面试
阳懿2 小时前
meta-llama-3-8B下载失败解决。
前端·javascript·html