系列文章
提示：转到日常小技巧专栏，观看更多内容！
点我直达–>日常小技巧专栏
前言
1.下载看板娘资源
- 百度网盘下载 提取码：mbyw
- CSDN下载
2.上传资源到文件
进入你的博客后台的管理页面
https://i.cnblogs.com/posts 
flat-ui.min.css (浮动菜单栏可以不加但是无法可视化设置了)
live2d.js(live2d动作)
waifu.css（在页面的左侧的相关样式设置）
waifu1.css（在页面的左侧的相关样式设置）
waifu-tips.js(看板娘的提示语音)
3.在设置中调用资源
黏贴代码
https://blog-static.cnblogs.com/files/blogs/ 自定义模板复制下方代码，替换字符串“你的博客文件前缀”为你的博客文件前缀即可使用。
DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="你的博客文件前缀/waifu.css"/> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">
script>
head> <body> <link rel="stylesheet" type="text/css" href="你的博客文件前缀/waifu.css"> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;">
div> <canvas id="live2d" width="280" height="250" class="live2d">
canvas> <div class="waifu-tool"> <span class="fui-home">
span> <span class="fui-chat">
span> <span class="fui-eye">
span> <span class="fui-user">
span> <span class="fui-photo">
span> <span class="fui-info-circle">
span> <span class="fui-cross">
span>
div>
div> <script src="你的博客文件前缀/live2d.js">
script> <script src="你的博客文件前缀/waifu-tips.js">
script> <script type="text/javascript">initModel()
script> <link rel="stylesheet" type="text/css" href="你的博客文件前缀/flat-ui.min.css"/>
body>
html> 下面是我自己的代码，不建议大家复制！大家可以参考，不然这样你的设置会跟随我变化······
DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs//waifu.css"/> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">
script>
head> <body> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs//waifu.css"> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;">
div> <canvas id="live2d" width="280" height="250" class="live2d">
canvas> <div class="waifu-tool"> <span class="fui-home">
span> <span class="fui-chat">
span> <span class="fui-eye">
span> <span class="fui-user">
span> <span class="fui-photo">
span> <span class="fui-info-circle">
span> <span class="fui-cross">
span>
div>
div> <script src="https://blog-static.cnblogs.com/files/blogs//live2d.js">
script> <script src="https://blog-static.cnblogs.com/files/blogs//waifu-tips.js">
script> <script type="text/javascript">initModel()
script> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs//flat-ui.min.css"/>
body>
html> 4.看看效果
总结
大家喜欢的话，给个?，点个关注，给作者更多更新的动力！继续跟大家分享敲代码过程中遇到的问题！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/225256.html原文链接：https://javaforall.net
