博客园美化系列__看板娘

1. 博客园添加看板娘

　　* 一直有人问我左下角的看板娘是怎么加上去的

　　* 刚开始看别人的随笔看得一脸懵逼，自己捣鼓半个小时才弄好的

　　* 于是就想写一篇容易看懂的随笔
2. 看板娘文件下载地址
　　> https://files.cnblogs.com/files/Twittery/live2d_%E9%97%AB.zip

3. 将文件上传到博客园

　　* 只要上传

　　　　+ waifu.css

　　　　+ waifu-tips.js

　　　　+ live2d.js

4. 代码实现

``` html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Live2D</title>

<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/Twittery/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/Twittery/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>

<script src="https://files.cnblogs.com/files/Twittery/live2d.js"></script>

<script src="https://files.cnblogs.com/files/Twittery/waifu-tips.js"></script>

<script type="text/javascript">initModel()</script>

</body>

</html>

<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/Twittery/flat-ui.min.css"/>

```

注意：将文件地址换成自己文件的地址

posted on 2020-04-02 22:13 (Play) 阅读(441) 评论(1) 编辑收藏举报

随笔档案

常用链接

我的标签

积分与排名

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论