直接粘贴以下代码(静态网页在_config.yml中添加,博客园在页尾html中加):linkrel=stylesheethref=https://cdn.jsdelivr.net/gh/Dreamer-Paul/Pio@2.4/static/pio.min.css/scriptasync=asyncsrc=https://c...

直接粘贴以下代码(静态网页在_config.yml中添加,博客园在页尾html中加):
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Pio@2.4/static/pio.min.css"
/>
<script
async="async"
src="https://cdn.jsdelivr.net/combine/gh/Dreamer-Paul/Pio@2.4/static/l2d.min.js,gh/Dreamer-Paul/Pio@2.4/static/pio.min.js"
onl oad='
let pio_container = document.createElement("div");
pio_container.classList.add("pio-container");
pio_container.classList.add("right");
pio_container.style.bottom = "-2rem";
pio_container.style.zIndex = "1";
document.body.insertAdjacentElement("beforeend", pio_container);
let pio_action = document.createElement("div");
pio_action.classList.add("pio-action");
pio_container.insertAdjacentElement("beforeend", pio_action);
let pio_canvas = document.createElement("canvas");
pio_canvas.id = "pio";
pio_canvas.style.width = "14rem";
pio_canvas.width = "600";
pio_canvas.height = "800";
pio_container.insertAdjacentElement("beforeend", pio_canvas);
let pio = new Paul_Pio({
"mode": "fixed",
"hidden": true,
"content": {
"link": ["https:\/\/AbnerHung.github.io"],
"skin": ["要换成我的朋友吗?", "让她放个假吧~"],
"hidden": true,
},
"model": [
"https:\/\/cdn.jsdelivr.net/gh/xiaoski/live2d_models_collection/mikoto/mikoto.model.json",
"https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/tororo/tororo.model.json",
"https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/platelet-2/model.json",
"https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/xiaomai/xiaomai.model.json",
"https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/mashiro/seifuku.model.json",
"https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/Violet/14.json",
"https:\/\/cdn.jsdelivr.net/gh/xiaoski/live2d_models_collection/Kobayaxi/Kobayaxi.model.json",
"https:\/\/cdn.jsdelivr.net/gh/xiaoski/live2d_models_collection/uiharu/uiharu.model.json"
]
});'
></script>
模型以及js代码来源于网络~
织梦狗教程
本文标题为:用html代码给网页加个live2d看板娘吧


基础教程推荐
猜你喜欢
- Jquery中$.ajax()方法参数详解 2022-10-17
- react中ref获取dom或者组件的实现方法 2023-07-09
- 细数Ajax请求中的async:false和async:true的差异 2023-01-26
- 《CSS3实战》笔记--渐变设计(二) 2022-11-16
- HTML5实现桌面通知 提示功能 2022-09-16
- Vue使用vue-cli基于脚手架编写项目_自己编写一个vue基本_认识项目结构---vue工作笔记0019 2023-10-08
- input submit、button和回车键提交数据详解 2022-11-16
- 一个简单Ajax类库及使用方法实例分析 2022-12-18
- 手机屏幕尺寸测试——手机的实际显示页面的宽度 2022-11-16
- Ajax写分页查询(实现不刷新页面) 2023-01-31