看着很多博客都有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. Redis通过IO进行序列化+反序列化

    必须引用序列化Serializable接口 创建类:Role package com.wbg.springRedis.entity; import java.io.Serializable; publ ...

  2. 【题解】洛谷P1032 [NOIP2002TG]字串变换（BFS+字符串）

    洛谷P1032:https://www.luogu.org/problemnew/show/P1032 思路 初看题目觉得挺简单的一道题 但是仔细想了一下发现实现代码挺麻烦的 而且2002年的毒瘤输入 ...

  3. 【Linux学习笔记】常用命令速记

    创建文件夹:mkdir 文件夹名 删除文件夹 rmdir 文件夹名 进入文件夹 cd 文件夹名 给某个目录所有用户配置读写权限:chmod 777 -R 文件夹名(-R会递归里面所有的子文件夹并给和父 ...

  4. c# 关闭socket的标准方法

    aSocket.Shutdown(SocketShutdown.Both); aSocket.Close(); c#关闭socket时,单独使用socket.close()通常会造成资源提前被释放,应 ...

  5. DBUtils连接池，websocket

    1.mysql数据库连接池 概念:数据库连接池(Connection pooling)是程序启动时建立足够的数据库连接,并将这些连接组成一个连接池,由程序动态地对池中的连接进行申请,使用,释放. 这样 ...

  6. 课时47.datalist标签（了解）

    1.datalist标签 作用:给输入框绑定待选项 2.datalist格式: <datalist> <option>待选项内容</option> </dat ...

  7. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  8. SHELL脚本简单的赋值与递增

    Count=`expr $Count + 1`;#可以在各种shell执行,其他类C的写法只能在指定的bash版本执行; 赋值不能带$, 带$相当于字符串常量了;执行脚本参考如下 #!/bin/sh ...

  9. 从tomcat下载文件的配置方法(很全呢)

    前几天我做的项目有个下载文件的东西让我苦恼了一下,上传的文件没有放到OSS服务器,而是直接放到tomcat内, 我就想做一个a标签直接下载的得了,结果点开一直都说没有该文件,我查了很多资料找到了如何配 ...

  10. PHP中$a && $b = $c 语法的用法

    $a && $b = $c 表示:如果$a为真,则执行$b = $c,否则不执行. 可以用if语句替代: if ($a) { $b = $c; } 实例: $a = true; $b ...