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

正常情况

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

相关推荐
UXbot4 小时前
无需设计经验也能做原型:AI辅助工具功能评测
前端·人工智能·低代码·ui·ios·交互
Csvn4 小时前
前端架构设计:构建可维护的大型应用
前端
lichenyang4535 小时前
鸿蒙 ArkUI 走马灯卡片实战:从官方文档检索到 Swiper 实现
前端
喵个咪5 小时前
吃透后台权限系统:从架构设计到 Vue3/React 双框架完整落地
前端·vue.js·react.js
一起逃去看海吧5 小时前
对接LangSmith
java·前端·数据库
wyhwust5 小时前
web应用技术-第一次课后作业
java·前端·数据库
问心无愧05135 小时前
ctf show web入门257
android·前端·笔记
学且思5 小时前
Vue3 Patch 算法深度解析:从原理到源码实现
前端·vue.js
streaker3035 小时前
从复制 Token 到复用登录态:site-fetchkit 的抽离过程
前端·浏览器·ai编程
dsyyyyy11015 小时前
CSS继承性
前端·css·tensorflow