看着很多博客都有live2D的萌萌哒看板娘，我闲着有空说干就干。

  1. 从参考博客的附件中下载资源文件
  • waifu.css
  • waifu-tips.js
  • live2d.js
  • flat-ui.min.css//若不加菜单可以不引入
  1. 上传资源文件到博客园
  2. 申请js权限
  3. 设置博客园页脚Html代码(其中的资源文件可以替换成你自己的url)

页脚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.     <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/lgjbky/waifu.css"/>
  6.     <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/lgjbky/flat-ui.min.css"/>
  7. </head>
  8. <body>
  9.     <div class="waifu">
  10.         <div class="waifu-tips"></div>
  11.         <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
  12.         <div class="waifu-tool">
  13.             <span class="fui-home"></span>
  14.             <span class="fui-chat"></span>
  15.             <span class="fui-eye"></span>
  16.             <span class="fui-user"></span>
  17.             <span class="fui-photo"></span>
  18.             <span class="fui-info-circle"></span>
  19.             <span class="fui-cross"></span>
  20.         </div>
  21.     </div>
  23.     <script src="https://blog-static.cnblogs.com/files/lgjbky/waifu-tips.js"></script>
  24.     <script src="https://blog-static.cnblogs.com/files/lgjbky/live2d.js"></script>
  25.     <script type="text/javascript">initModel()</script>
  26. </body>
  27. </html>

参考

博客美化—添加萌萌的live2D看板娘(不能再简单了)的更多相关文章

  1. 【全网最全的博客美化系列教程】01.添加Github项目链接

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  2. 【全网最全的博客美化系列教程】02.添加QQ交谈链接

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  3. 【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  4. 【博客美化】06.添加QQ交谈链接

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  5. 【博客美化】05.添加GitHub链接

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  6. 【全网最全的博客美化系列教程】08.自定义地址栏Logo

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  7. Hexo 添加Live2D看板娘

    title: Hexo 添加 Live2D看板娘 二次元什么的最喜欢了[大好きです] 准备 项目地址 live2d模型 部分模型预览 开始 首先进入Hexo博客根目录安装live2d插件 $ npm ...

  8. 在博客中增加自己的live2d纸片人模型方法

    目录 在博客中增加自己的live2d纸片人模型 准备工具 使用步骤 附件 在博客中增加自己的live2d纸片人模型 准备工具 github仓库:存放live2d模型和json文件 如果你的博客支持本地 ...

  9. 【博客美化】04.自定义地址栏logo

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

随机推荐

  1. iOS 8及以后版本 如何创建UIAlertView?

    1. Important: UIAlertView is deprecated in iOS 8. (Note that UIAlertViewDelegate is also deprecated. ...

  2. java 编写小工具 尝试 学习（二）

    1. 新建一个窗口  ,代码 如下 ,截图 如下 package jFrameDemo; import javax.swing.JFrame; import javax.swing.WindowCon ...

  3. 课时22.br标签（掌握）

    br标签,如何在html中换行,可以使用br标签 1.br标签的作用:换行 2.br标签的格式:<br> 3.br标签的注意点: 3.1多个br标签可以连续使用,使用了多个br标签就会换多 ...

  4. HTML中的<meta>标签的使用

    HTML中<meta>标签的使用 在我们制作的网页中,要是想让它能够让更多的人去访问,最好的方法就是通过搜索引擎来找到你的网址,于是需要你的网页可以有关键词能够让搜索引擎来识别,于是HTM ...

  5. 二、Shiro 认证开发

    I.java开发 环境准备 <dependencies> <dependency> <groupId>junit</groupId> <artif ...

  6. IOS 枚举 enum

    前言:oc中枚举的正确使用,可以增强代码的可读性,减少各种“错误”,让代码更加的规范.下面先介绍枚举的用法,最后介绍个人对枚举的理解,什么是枚举,为什么用枚举. 一. OC中,枚举的使用 1. 写法1 ...

  7. iOS 文件下载及断点续传

    ios的下载我们可以使用的方法有:NSData.NSURLConnection.NSURLSession还有第三方框架AFNetworking和ASI 利用NSData方法和NSURLConnecti ...

  8. 『C++』Temp_2018_12_26

    #include <iostream> #include <string> #include <array> using namespace std; class ...

  9. RAC初体验（环境搭建）

      实施阶段: 1.主机配置 2.安装Clusterware 3.安装Oracle Database 4.配置Listener 5.创建ASM 6.创建Database 一.主机配置 1.网络设置 I ...

  10. Redis（八）：Redis的复制（Master/Slave）

    Redis的复制(Master/Slave)目录导航: 是什么 能干嘛 怎么玩 复制原理 哨兵模式(sentinel) 复制的缺点 是什么 官网 行话:也就是我们所说的主从复制,主机数据更新后根据配置 ...