博客右下角的动态人物（live2d）看板娘

效果图

代码如下

 <!-- 看娘板 --><script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，有两种可切换,喜欢哪个打开注释,注释掉另一个就行了
// jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
"scale": 1
},
"display": {
"superSample": 2,
"width": 200,//小萝莉的宽度
"height": 350,//小萝莉的高度
"position": "right",//看板娘的表现位置
"hOffset": 50,
"vOffset": -20
}
});

如果在博客园设置

将一下代码粘贴进博客侧边栏公告

 <!-- 看娘板 --><script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，有两种可切换,喜欢哪个打开注释,注释掉另一个就行了
// jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
"scale": 1
},
"display": {
"superSample": 2,
"width": 200,//小萝莉的宽度
"height": 350,//小萝莉的高度
"position": "right",//看板娘的表现位置
"hOffset": 50,
"vOffset": -20
}
});

可以切换模型的看板娘

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"></head><body></body><script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
</html>

博客右下角的动态人物（live2d）看板娘相关推荐

博客右下角的动态人物（live2d）
效果: 那只猫咪不用管,是谷歌得插件 <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/l ...
Hexo博客NexT主题美化之新增看板娘(能说话、能换装)
前言更多效果展示,请访问我的个人博客. 效果图: 教程: 小白水平: hexo的官方是支持看板娘的,已经封装好了插件,但只是模型,不能说话.不能换装.功能较少. 安装模块,如下: npm inst ...
如何把可爱的Live2d看板娘放到自己的网页上
发现好多的博客页面上有这样一个看板娘,非常的讨人喜欢,于是自己就尝试将其添加入网页. 效果图: 首先下载资源并解压:https://www.lanzous.com/i5xllwh 双击live2d.h ...
html网页制作看板娘原理,博客网页上添加live2D看板娘
一:前言 "看板娘",简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代言人的含义.所用的技术是live2D,live2d并不 ...
搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤
一.安装hexo 1.下载安装软件 git:https://git-scm.com/downloads node:https://nodejs.org/en/ 2.安装好两个工具之 ...
什么？还能在网站上藏一个老婆？（怎么在给个人博客或者网站添加基于Live2D的动漫模型）
什么?还能在网站上藏一个老婆??? 父老乡亲们第一次访问本菜鸟的网站时,第一眼看到的肯定是我偷偷放在左下角的老婆啦~(/滑稽) 那么问题来了,父老乡亲们如果也想把老婆放上去,该怎么做呢? 首先,就要引 ...
屏蔽博客园背景动态线条
1. 问题描述由于博客园允许用户添加含js的html代码来装饰自己的博客界面,这导致很多人跟风地给自己博客添加背景动态线条.live2D等,其中动态背景线条如下图所示: 它不停地随机生成线条,并漂浮 ...
Hexo添加Live2D看板娘最新教程
目录前言介绍 Live2D 看板娘添加Live2D看板娘准备工作安装依赖下载model文件添加live2d看板娘到hexo 查看效果发布结束语参考前言上次我们搭建了hexo博客 ...
html的美图片加上2d动画,网站上面添加一个动漫小女孩的html代码 WordPress添加live2d看板娘...
在你博客程序头部文件(header.php)引入界面样式,在 head 标签内插入如下代码在你博客程序页脚文件(footer.php)引入脚本,在最后一个标签前插入如下代码: var messag ...

博客右下角的动态人物（live2d）看板娘

博客右下角的动态人物（live2d）看板娘相关推荐

最新文章

热门文章