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

  1. 从参考博客的附件中下载资源文件
  • waifu.css
  • waifu-tips.js
  • live2d.js
  • flat-ui.min.css//若不加菜单可以不引入
  1. 上传资源文件到博客园
  2. 申请js权限
  3. 设置博客园页脚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>

参考

博客美化—添加萌萌的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. java基本方法

    Java 方法 在前面几个章节中我们经常使用到 System.out.println(),那么它是什么呢? println() 是一个方法. System 是系统类. out 是标准输出对象. 这句话 ...

  2. 在jsp页面动态添加数据库中的内容

    工具:myeclipse+oracle11g 1.首先新建一个jsp页面. 2.在src目录下新建实体类User.java 3.创建BaseDao用来链接数据库 4.在pl/sql中创建存储过程 5. ...

  3. Eclipse新导入的项目中ctrl+点击指定方法名或类名没有反应，不能跳转问题

    项目没有转成java项目 解决方法:右击项目名---选择properties----点击Project Facets,这样就可以实现ctrl+左键点击跳转了. 转成java项目后会报错 解决办法:选中 ...

  4. js 变速动画函数

    //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ...

  5. 用VMWare搭建服务器集群不能上外网的三种模式下对应解决办法

    前言 决心要花费宝贵时间写下这篇心得,是因为从昨天晚上到今天上午被这个VMWare模拟搭建的服务器集群不能上外网的问题搞得很心烦,最后决定跟它杠上了!上午还通过远程连接得到了“空白”同学的帮助,在此表 ...

  6. 关于Vue的组件的通用性问题

    在项目中,经常会有需求让我们把很多通用性的功能写成一个模板,然后根据不同的应用场景传入不同的参数来完成某种功能 但是在很多时候,其实并不是一个模板就能完成所有的功能的 这就需要分类写组件了,但是需求方 ...

  7. 30行代码实现js原生三级联动菜单

    var oneArr=[['00','成都'],['01','绵阳'],['02','南充']] var towArr={ '00':[['000','武侯区'],['002','锦江区']], '0 ...

  8. spring-集成redis

    Redis是key-value存储的非关系型数据库.Spring Data Redis包含了多个模板实现,用来完成Redis数据库的数据存取功能 1.如何连接Redis? Spring Data Re ...

  9. 六个比较好用的php数组Array函数

    1. array_column 返回输入数组中某个单一列的值.2. array_filter 用回调函数过滤数组中的元素.3. array_map 将用户自定义函数作用到给定数组的每个值上,返回新的值 ...

  10. 配置一个nginx反向代理&负载均衡服务器

    一.基本信息 系统(L):CentOS 6.9 #下载地址:http://mirrors.sohu.com 反代&负载均衡(N):NGINX 1.14.0 #下载地址:http://nginx ...