看着很多博客都有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. HDU 1029 Ignatius and the Princess IV （map的使用）

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1029 Ignatius and the Princess IV Time Limit: 2000/10 ...

  2. 控制DIV中的文字绝对居中

        水平居中:<div align="center">Content</div>       垂直居中:<div style="line ...

  3. NodeJs仿阿帕奇实现浏览某一路径文件目录效果

    网页效果 这里实现的效果是将我的电脑下的某一路径文件展现在网页中 html网页代码: <h1>仿阿帕奇网页 </h1> <table> <tr> < ...

  4. 自动曝光修复算法 附完整C代码

    众所周知, 图像方面的3A算法有: AF自动对焦(Automatic Focus)自动对焦即调节摄像头焦距自动得到清晰的图像的过程 AE自动曝光(Automatic Exposure)自动曝光的是为了 ...

  5. 竞赛题解 - Ikki's Story IV-Panda's Trick

    Ikki's Story IV-Panda's Trick - 竞赛题解 也算是2-sat学习的一个节点吧 终于能够自己解决一道2-sat的题了 ·题目 一个圆上有n个点按顺时针编号为 0~n-1 , ...

  6. Python-变量与基础数据类型

    ·变量(variable)  笔记: 变量本质上是一个占位符.变量可以用来存储整数.字符串.列表等.简单的可以理解为一个座位,可以坐老人也可以坐小孩,可以坐男孩,也可以坐女孩. 在python里,标识 ...

  7. Python爬虫系列 - 初探：爬取新闻推送

    Get发送内容格式 Get方式主要需要发送headers.url.cookies.params等部分的内容. t = requests.get(url, headers = header, param ...

  8. 对fgets的理解

    gets()函数 因为用gets函数输入数组时,只知道数组开始处,不知道数组有多少个元素,输入字符过长,会导致缓冲区溢出,多余字符可能占用未使用的内存,也可能擦掉程序中的其他数据,后续用fgets函数 ...

  9. Hadoop端口

    本文转自:<Hadoop默认端口应用一览> Hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着Hadoop周边 ...

  10. 【blockly教程】第二章 Blockly编程基础

    2.1 Blockly的数据类型 2.1.1 数据的含义  在计算机程序的世界里,程序的基本任务就是处理数据,无论是数值还是文字.图像.图形.声音.视频等信息,如果要在计算机中处理的话,就必须将它们转 ...