美化——看板娘

看板娘

感觉博客园的模板有点单调，自己找了一些方法添加一些人物---看板娘，效果还行，就记录一下

1.下载相关文件

解压就是这些

2.将文件上传到博客园

waifu.css
waifu-tips.js
live2d.js

3.实现代码

把代码放到脚本HTML代码处

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5     <title>Live2D</title>
 6      
 7     <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/lanyincao/waifu.css"/>
 8     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 9 </head>
10 <body>
11     <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/lanyincao/waifu.css">
12                                                                         
13                                                                                                           
14     <div class="waifu" id="waifu">
15         <div class="waifu-tips" style="opacity: 1;"></div>
16         <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
17         <div class="waifu-tool">
18             <span class="fui-home"></span>
19             <span class="fui-chat"></span>
20             <span class="fui-eye"></span>
21             <span class="fui-user"></span>
22             <span class="fui-photo"></span>
23             <span class="fui-info-circle"></span>
24             <span class="fui-cross"></span>
25         </div>
26     </div>
27     <script src="https://files.cnblogs.com/files/lanyincao/live2d.js"></script>
28     <script src="https://files.cnblogs.com/files/lanyincao/waifu-tips.js"></script>
29     <script type="text/javascript">initModel()</script>
30 </body>
31 </html>
32 <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

4.修改

将文件地址换成自己文件的地址

5.效果