博客美化—添加萌萌的live2D看板娘(不能再简单了)
看着很多博客都有live2D的萌萌哒看板娘，我闲着有空说干就干。
- 从参考博客的附件中下载资源文件
- waifu.css
- waifu-tips.js
- live2d.js
- flat-ui.min.css//若不加菜单可以不引入
- 上传资源文件到博客园
- 申请js权限
- 设置博客园页脚Html代码(其中的资源文件可以替换成你自己的url)
页脚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/lgjbky/waifu.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/lgjbky/flat-ui.min.css"/>
</head>
<body>
<div class="waifu">
<div class="waifu-tips"></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/lgjbky/waifu-tips.js"></script>
<script src="https://blog-static.cnblogs.com/files/lgjbky/live2d.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>
参考
- https://www.fghrsh.net/post/123.html #发源地
- https://www.cnblogs.com/yjlblog/p/8724881.html # 可以参考
- http://www.cnblogs.com/clwydjgs/p/9291283.html #有误导的嫌疑
博客美化—添加萌萌的live2D看板娘(不能再简单了)的更多相关文章
- 【全网最全的博客美化系列教程】01.添加Github项目链接
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- 【全网最全的博客美化系列教程】02.添加QQ交谈链接
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- 【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮
博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...
- 【博客美化】06.添加QQ交谈链接
博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...
- 【博客美化】05.添加GitHub链接
博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...
- 【全网最全的博客美化系列教程】08.自定义地址栏Logo
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- Hexo 添加Live2D看板娘
title: Hexo 添加 Live2D看板娘 二次元什么的最喜欢了[大好きです] 准备 项目地址 live2d模型 部分模型预览 开始 首先进入Hexo博客根目录安装live2d插件 $ npm ...
- 在博客中增加自己的live2d纸片人模型方法
目录 在博客中增加自己的live2d纸片人模型 准备工具 使用步骤 附件 在博客中增加自己的live2d纸片人模型 准备工具 github仓库:存放live2d模型和json文件 如果你的博客支持本地 ...
- 【博客美化】04.自定义地址栏logo
博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...
随机推荐
- SQL 二
1.执行DML语句的步骤:在数据库缓冲区缓存中搜索相关的块:将块从数据文件复制到缓冲区:将变更向量写入日志缓冲区:将变更向量应用于数据库缓冲区缓存.2.重做可以保护的段类型:索引段.表段.撤销段.3. ...
- ios reloadsection 位置偏移
这个问题再iOS11之前不会发生,目前仅在iOS11机型上会出现. 解决这个问题很简单,只需要你在初始化tableview的时候,把estimate的高度都设为0即可. self.tableView. ...
- Linux awk命令用法
概述 awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理 awk工作流程是这样的:读入有'\n'换行符分割的一条记录,然后将记录按指定的域分隔符划分域,填充域,$0 ...
- 在IOS端点击数字后会调起系统拨号界面
在IOS端点击数字后会调起系统拨号界面,解决方案: <meta name="format-detection" content="telephone=no" ...
- Java Web项目里 classpath 具体指哪个路径
classpath路径指什么 只知道把配置文件如:mybatis.xml.spring-web.xml.applicationContext.xml等放到src目录(就是存放代码.java文件的目录) ...
- ueditor 富文本编辑器 Uncaught TypeError: Cannot set property 'innerHTML' of undefined问题
ueditor.addListener("ready", function () { ueditor.setContent(‘内容'); });
- linux操作之软件安装(二)(源码安装)
源码安装 linux上的软件大部分都是c语言开发的 , 那么安装需要gcc编译程序才可以进行源码安装. yum install -y gcc #先安装gcc 安装源码需要三个步骤 1) ./confi ...
- delphi 2010以上 安装 第三方控件
delphi-“can't be installed because it is not a design time package. 一定要先装 dcl*.dpk ----------------- ...
- django配置虚拟环境-1
目录 安装python 使用venv虚拟环境 使用Virtualenv虚拟环境 ### Windows安装 方案一 方案二 Linux安装 其他命令 安装django 安装python https:/ ...
- python3.5 安装twisted
https://blog.csdn.net/caimouse/article/details/77647952 下载地址:http://www.lfd.uci.edu/~gohlke/pythonli ...