博客美化—添加萌萌的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注入（安全性测试）
手动你的ASP站可否注入: http://127.0.0.1/xx?id=11 and 1=1 (正常页面) http://127.0.0.1/xx?id=11 and 1=2 (出错页面) 检测表段 ...
- 关于H5 移动端css 文本超出时省略号 失效的问题
之前写代码的时候遇到一个问题,就是用了下面这段css代码来让文字超出范围隐藏并显示省略号. overflow: hidden; text-overflow: ellipsis; display: -w ...
- Oracle 体系结构三 后台进程
实例后台进程在启动实例时启动,在终止实例时终止运行. SMON SMON(system monitor)起初的任务是安装和打开数据.SMON通过查找和验证数据库控制文件来安装数据库.此后,它通过查找和 ...
- 【oracle笔记4】存储过程
存储过程是一组为了完成特定功能的sql语句集,存储在数据库中,经过一次编译后再次调用不需要编译.用户通过指定存储过程的名字来执行它. 基本语法: create or replace procedure ...
- BZOJ 3771: Triple(生成函数 FFT)
Time Limit: 20 Sec Memory Limit: 64 MBSubmit: 911 Solved: 528[Submit][Status][Discuss] Description ...
- mysql中对于时间的处理，时间的滚动，求时间间隔，切换时区等等
mysql中对于时间的处理,时间的滚动,求时间间隔,切换时区等等 在mysql的使用过程中,有时候会出现对时间进行的操作,比如时间向前向后滚动,求2个时间的间隔,或者切换时区的操作 1,时间向前滚动( ...
- 【Storm一】Storm安装部署
storm安装部署 解压storm安装包 $ tar -zxvf apache-storm-1.1.0.tar.gz -C /usr/local/src 修改解压后的apache-storm-1.1. ...
- STM32（13）——SPI
简介: SPI,Serial Peripheral interface串行外围设备接口. 接口应用在:EEPROM, FLASH,实时时钟,AD 转换器,还有数字信号处理器和数字信号解码器之间. 特点 ...
- python3 package management 包管理 实例
包是一种组织管理代码的方式,包里面存放的是模块 用于将模块包含在一起的文件夹就是包 包内包含__init__.py标志性文件 定义一个学生类,一个sayhello函数,一个打印语句 # p01.py ...
- python 爬虫（爬取网页的img并下载）
from urllib.request import urlopen # 引用第三方库 import requests #引用requests/用于访问网站(没安装需要安装) from pyquery ...