给博客页面添加 live2d 小萝莉
添加依赖
在页脚HTML代码的地方添加下面的代码：
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
初始化
<script>
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型
jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
"scale": 1
},
"display": {
"position": "right", //看板娘的表现位置
"width": 150, //小萝莉的宽度
"height": 300, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
多种可供选择
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
修改下图的地方就可以更换啦：
最近新发现了一个
添加页尾html代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Live2D</title>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/ECJTUACM-873284962/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/ECJTUACM-873284962/waifu.css">
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
</div>
</div>
<script src="https://files.cnblogs.com/files/ECJTUACM-873284962/live2d.js"></script>
<script src="https://files.cnblogs.com/files/ECJTUACM-873284962/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>
</div>
</body>
</html>
~~~~~ END ~~~~~
给博客页面添加 live2d 小萝莉的更多相关文章
- Live2D 博客页面添加板娘
偶然看到了live2d,神奇的二次元呀 在页脚Html代码中添加如下代码即可: <link rel="stylesheet" type="text/css" ...
- 博客美化—添加萌萌的live2D看板娘(不能再简单了)
看着很多博客都有live2D的萌萌哒看板娘,我闲着有空说干就干. 从参考博客的附件中下载资源文件 waifu.css waifu-tips.js live2d.js flat-ui.min.css// ...
- PHP制作个人博客-广告位添加与调用 推荐文章数据调取
上一节博客的导航我们已经动态调取,这一节我们主讲一下如何根据页面布局,后台添加广告位,及模板上动态调取广告.博客推荐文章的数据调用. 首先我们在云码博客的后台添加10条左右的测试数据,thinkcmf ...
- 给自己的博客上添加个flash宠物插件
前言 最近在一些博主的博客上看到一些小宠物的挂件,很有趣,访客到了网站后可以耍耍小宠物,增加网站的趣味性,在功能强大的博客系统上看到有这样的小宠物挂件还是蛮有趣的. 正文 下面就简单介绍下如何在博客园 ...
- 如何给自己的博客上添加个flash宠物插件
最近在一些博主的博客上看到一些小宠物的挂件,很有趣,访客到了网站后可以耍耍小宠物,增加网站的趣味性,在功能强大的博客系统上看到有这样的小宠物挂件还是蛮有趣的. 多次差找资料后,终于在http://ww ...
- 在CSDN博客中添加量子恒道统计功能的做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 什么是量子恒道统计?量子恒道统计是一套免费的网站流量统计分析系统.致力于为所有个人站长.个人博主.所有网站管理者.第三 ...
- Confluence 6.15 博客页面（Blog Posts）宏参数
参数是让你可以用来控制宏的格式和输出的选项.在 Confluence 存储格式或者 Wiki 标记(wikimarkup)中使用的参数名与在宏浏览器中使用的标签名是不同的,在下面我们将会用括号列出 ...
- Confluence 6.15 博客页面（Blog Posts）宏
博客页面宏允许你 Confluence 页面中显示博客页面.通过单击博客的标题将会把你链接到博客页面中. 使用博客页面宏 为了将博客页面宏添加到页面中: 从编辑工具栏中,选择 插入(Insert) ...
- 使用vuepress搭建GitHub pages静态博客页面
vuepress官网 vuepress是尤大开发来写文档的静态页面.可以用Markdown 语法,并且也可以使用vue模块化的方式开发页面. vuepress-theme-reco 是另外的开发者开发 ...
随机推荐
- C++-HDU1003-Max Sum
时间复杂度O(n) 空间复杂度O(1) #include <cstdio> int main() { int T;scanf("%d",&T); ,n,a,l, ...
- 【译】从 Rust 到不只是 Rust：PHP 语言领域
From Rust to beyond: The PHP galaxy 译文 原文地址:https://mnt.io/2018/10/29/from-rust-to-beyond-the-php-ga ...
- VMare安装及虚拟机的安装
VMware安装 1.下载安装包安装 2.安装虚拟机  2.在命令行中通过n ...
- 《你一生的故事》--------------science fiction-------------《巴比伦塔》
而塔就不一样了,不等你靠近去触摸它,就已经感到一种纯粹的坚固与力量.所有的传说都认为,建造这座塔的目的,是为了获得一种力量,这种力量是任何一座巴比伦庙塔都未曾拥有的.普通的巴比伦塔只是用太阳晒干的泥砖 ...
- docker 环境部署
docker 查看所有容器 docker ps -a docker 查看所有running 容器: docker ps docker 停止全部容器: docker stop $(docker ps ...