博客美化—添加萌萌的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 ...
随机推荐
- 如何在运行jar指定使用的JDK
写一个.bat文件 例如在同文件夹下,新建一个run.bat文件 run.bat 的内容是如下: set JAVA_HOME=C:\jdk1.7.0_67set CLASSPATH=.;%JAVA_H ...
- 利用DBMS_REDEFINITION包将非分区表转化成分区表
将普通表格转化分区表的方法大致有四种: A. 通过 Export/import 方法B. 通过 Insert with a subquery 方法C. 通过 Partition Exchange 方法 ...
- morphia 框架 mongodb内嵌查询
mongodb中存储的文档格式如下,实现查询fromdata下did和dvid为指定值的数据 { "_id": { "$oid": "553f4a9f ...
- Spring Cloud 微服务入门（一）--初识分布式及其发展历程
分布式开发出现背景 当有计算机出现一段时间之后就开始有人去想如何将不同的电脑进行网络连接,而网络连接之后对于web的项目开发就探索所谓的分布式设计,同时人们也意识到重要的数据必须多份存在.所以分布式就 ...
- awk命令用法
awk:把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理,是一个强大的文本分析工具,在对数据分析并生成报告时很有优势. awk有3个不同版本: awk.nawk和gawk, ...
- webpack-dev-server 多入口自动刷新，支持对象
万物的来源~webpack 本身 watch webpack watch 传送门 webpack 可以监听文件变化,当它们修改后会重新编译 watch boolean 启用 Watch 模式.这意味着 ...
- axios api封装
import axios from 'axios'; import qs from 'qs'; const host = 'url' axios.defaults.baseURL = host; // ...
- json提取嵌套数据
//数据 string html = "{\"code\":\"0000\",\"desc\":\"\",\& ...
- python爬虫学习笔记（1）
一.请求一个网页内容打印 爬取某个网页: from urllib import request # 需要爬取的网页 url = "https://mbd.baidu.com/newspage ...
- Java : logback简单配置
需要把logback.xml文件放在类路径下,如果是spring boot项目可以用 logging.config=classpath:log/xxxxxx.xml来指定配置文件 logback la ...