《博客园美化》为您的博客增加一个萌萌的看板娘吧
Posted chensv
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《博客园美化》为您的博客增加一个萌萌的看板娘吧相关的知识,希望对你有一定的参考价值。
效果图
这只是静态图片,需要参考请看右下角
需要用到的资源(上传到博客园后台)
- waifu.css
- waifu-tips.js
- live2d.js
html代码实现
<!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/chensv/waifu.css"/>
<!-- 引入css字体文件 --> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.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/chensv/waifu.css"> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;"></div> <canvas id="live2d" width="400" height="380" 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/chensv/live2d.js"></script> <script src="https://blog-static.cnblogs.com/files/chensv/waifu-tips.js"></script> <script type="text/javascript">initModel()</script> </body> </html>
html代码就放在侧边栏,这里值得注意的是,博主必须拥有js权限才能够使用js文件,如果没有权限,需要申请js权限,一般一天内就可以得到回复
百度网盘资源下载
https://pan.baidu.com/s/1gTGI5H3NfPcjQ7EX7nDtIQ
提取码:jyfz
以上是关于《博客园美化》为您的博客增加一个萌萌的看板娘吧的主要内容,如果未能解决你的问题,请参考以下文章