L2Dwidget二次元看板娘的web用法

打工人的猎奇心：
发现某些blog网站左下方或者右下方出现的二次元卡通人物或萌萌阿猫，除了萌，还可以监听鼠标的行为，产生互动的现象。为探究竟，打工人开始了行动…

一、看板娘 hexo live2d 演示

shizuku 看板娘

看板娘git

https://github.com/raoenhui/live2d-example

看板娘文档

https://juejin.im/post/6844904032423641096

二、代码实现

Talk is cheap. Show me the code.

2.1 方式一：cdn

只需要在【页首html代码】中引入L2Dwidget.js即可

<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
<!--<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>--><script>L2Dwidget.init({"model": {"jsonPath": "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json","scale": 1},"display": {"position": "right","width": 150,"height": 300,"hOffset": 0,"vOffset": -20},"mobile": {"show": true,"scale": 0.5},"react": {"opacityDefault": 0.8,"opacityOnHover": 1},"dialog": {"enable": true,"script": {'tap body': '哎呀！别碰我！','tap face': '人家是在认真写博客哦--前端妹子',}}});
</script>

这里展示部分图：

2.2 方式二：源码实现

npm install --save hexo-helper-live2d

# 博客文档
https://huaji8.top/post/live2d-plugin-2.0/# git地址
https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md

2.3 demo

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Live2d Test Env</title><meta http-equiv="X-UA-Compatible" content="IE=edge"></head><body><p>试试摸摸头和这颗星星会有不同的对话哦</p><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="190" height="180" class="star"><polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:yellow;stroke:yellow;stroke-width:1;"/></svg><script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script><script type="text/javascript">L2Dwidget.on('*', (name) => {console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')}).init({dialog: {// 开启对话框enable: true,script: {// 每空闲 10 秒钟，显示一条一言'every idle 10s': '$hitokoto$',// 当触摸到星星图案'hover .star': '星星在天上而你在我心里 (*/ω＼*)',// 当触摸到角色身体'tap body': '哎呀！别碰我！',// 当触摸到角色头部'tap face': '人家已经不是小孩子了！'}}});</script></body>
</html>

L2Dwidget二次元看板娘的web用法相关推荐

看板娘全是php的怎么办,【教程】给网站添加互动二次元看板娘老婆
[本教程来自网络,已亲测可用,以下教程为详解,如有问题请指出] [关于二次元看板娘] 这是在PC网页上的效果及位置这是在手机端的效果(可能没有对话框,因为没有电脑端的鼠标指示) 教程开始首先你要有 ...
html给看板娘添加语音,如何给你的Jekyll博客添加可爱的二次元看板娘(Live2D)
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 有朋友问这个右下角的小东西是怎么弄出来的,今天就手把手教你.请往下看: Live2D Add the Sseexxyyy ...
Vue或html中使用L2Dwidget实现看板娘互动，对话框，语音，及Vue销毁看板娘
最终效果下载看板娘文件 csdn下载地址将下载后的压缩包解压,复制到vue项目的public文件夹下在index.html文件中引入js <script ...
html中看板娘添加,如何在自己开发的web中放入“看板娘”
什么是看板娘? 那就她了--> 就是她~ 看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一.简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用 ...
看板娘二次元 live2d
live2d https://l2dwidget.js.org/dev.html https://github.com/xiazeyu/live2d-widget.js 看板娘要切换看板娘吗? ht ...
L2Dwidget.js网页看板娘的使用总结
最近在浏览某些博客的途中,发现了一个有趣的东西,网页上出现了一个非常可爱的动漫人物,眼睛还会随着鼠标移动,真是太可爱了. 百度上有很多关于这个看板娘的教程,但都是告诉添加L2Dwidget.min.j ...
live2d（Web SDK 4.x）Web看板娘进阶
接上篇文章 Live2D(WebSDK 4.X)网页看板娘设置(一) 欢迎大家阅读本篇教程该篇教程为进阶版的看板娘设置教程,阅读完后可以极大程度的自定义你的看板娘项目. 教程内容: 去掉canvas ...
live2d PHP,GitHub - hiccphp/live2d-widget: 把萌萌哒的看板娘抱回家 | Live2D widget for web platform...
Live2D Widget 特性 Feature 在网页中添加Live2D看板娘.与PJAX兼容,支持无刷新加载. Add Live2D widget to web page. Compatible ...
live2d_二次元 | live2d为你的网站博客增加萌萌哒的看板娘
首先科普下什么是Live2D 来源百度百科:Live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发.通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于 ...

L2Dwidget二次元看板娘的web用法

一、看板娘 hexo live2d 演示

二、代码实现

2.1 方式一：cdn

2.2 方式二：源码实现

2.3 demo

L2Dwidget二次元看板娘的web用法相关推荐

最新文章

热门文章