live2d看板娘的引入

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量527 收藏
点赞数 1
分类专栏： 博客优化 文章标签： javascript css github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzys430/article/details/107428094
版权

live2d看板娘的引入

给博客来个看板娘只需要2行代码就可以实现，让你的博客看起来更加有趣（花里胡哨）

效果展示图

在左下角

看板娘在左下角描述

引入方法

首先这个插件需要Font Awesome（图标字体库）支持，所以需要在页面的<head></head>标签中引入以下css：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

然后在body标签内引入下面这段js就完成啦。

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

就是这么简单。

原文链接（发布地址）：https://xiejiabin.online/blog.html?blogId=202007010012

先谢郭嘉xie
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
live2d内嵌html,博客（网页）添加 Live2D 看板娘
weixin_32489501的博客
06-07 2632
Live2D demoLive2D 看板娘插件 (https://www.fghrsh.net/post/123.html) 的前端 HTML 源码基于 API 加载模型，支持 定制 提示语增加 参数设置 一键定制看板娘，易用性++增加 看板娘样式设置，可直接设置宽高度等支持多种一言接口，基于 JQuery UI 实现拖拽目录结构│ demo1-default.html // 常规引用 Demo│...
html Live2D 看板娘资源
11-23
5. **HTML模板**：展示Live2D看板娘的网页结构，包含引入JavaScript库、模型文件引用、以及与JavaScript交互的元素。 6. **图片资源**：背景图、按钮图标等辅助元素，提升整体视觉效果。 使用这些资源，开发者可以...
Hexo（sakura）添加live2d看板动画（可对话，换装互动）
cungudafa的博客
02-12 6907
一、live2d简介 Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。 示例：原博大大官网 根据鼠标热键进行互动 二、使用教程 hexo-helper-live2d中...
Vue看板娘教程详细版
辰鬼的博客
04-22 4413
网页看板娘教程2.0
【live2D看板娘】为你的网站添加萌萌的二次元板娘，这都拿不下你？
热门推荐
阿牛的博客
10-04 1万+
好久没有分享过有趣的东西了，这次我打算分享一个所有人都无法拒绝的前端小demo。相信好多自己搭建博客的盆友们总喜欢搞一个萌萌的二次元板娘，但基本都是网上引入别人封装好的资源，无法进行小部分修改，那么今天阿牛把我之前搞得可以扩展与修改的live2D板娘分享出来，快拿去装扮到你的博客小站去装x吧！
Live2D看板娘详细实现
m0_37792384的博客
03-04 9354
Live2D看板娘实现 开发工具IDEA 国际惯例先上图： 所需资源： 链接：https://pan.baidu.com/s/1s7IJIqGnn-cNRAfoS-qG5w 提取码：dhf4 其中包含了看板娘所需的CSS，image,JS,Live2d所需的基本资源。 下面就来实现吧 开发工具idea+tomcat,如果没有的小伙伴们可以自己从网上分别安装这两个资源并配置，网上有很多，这里我不在赘述了。（如果有很多人需要我或许可以出个教程…认真脸）。 1.创建项目 2.项目创建完成 3.引入看板娘
Live2D看板娘学习
qq_51049931的博客
11-22 1269
学习一个简单又实用的LIve2D看板娘
live2d 看板娘
羽渡尘的博客
11-21 641
【代码】live2d 看板娘。
vue3组件中使用live2d看板娘（仰望星空的sun）
qq_39123467的博客
07-19 1011
因为上个官方包版的canvas总是不能按理想状态更好的控制，渲染在vue中，所以我依然想参考“仰望星空的sun”大佬的笔记以及git开源项目，但是似乎困难重重，打包后的ts被vue当做js引用后使用总会出现一些问题，所以现在是没有成功实现，但是我还是要记个笔记留个底。
html网页制作看板娘原理,博客网页上添加live2D看板娘
weixin_39914752的博客
05-31 2640
一：前言“看板娘”，简而言之就是小店的女服务生，也有“吸引顾客，招揽生意，提高人气”等作用类似品牌形象代言人的含义。所用的技术是live2D，live2d并不是一种先进的技术，它产生的效果，都是用基本的平移、旋转、透明、曲面变形等操作实现的。最终的效果与贴图关系很大，而每一个动作，都需要制作师的精细调整。这是一个需要消耗大量时间精力的过程，因此质量好的模型并不多，质量好的也一般是在游戏中，版权受到...
vue3组件中使用live2d看板娘（官方包形式）
qq_39123467的博客
07-19 1581
看着还可以，其实还有很多问题没解决，因为是完全靠js渲染，实际上这个我括起来的内容完全是靠打包前的ts渲染的，导致不管是调整位置，还是调整样式，都是比较麻烦，鼠标事件也是在canvas内部识别，无法适应整个屏幕。如果上面的组件调试遇到问题，那么我们先在index中直接通过js渲染live2d，先看效果，然后再一步步调试。这里我已经默认你已经在之前的官方包中打包了bundle.js，如果不懂，就去看“关于官方包的下载使用”希望到这里你已经成功了，如果不成功，那么可以用我下面的html页面先调试下。
vue-live2d:vue live2d招牌女孩（演示
05-04
项目引入npm install vue-live2d// 在组件中引入import vueLive2d from 'vue-live2d'// 组件中的使用方法具体参考 `example/App.vue` 文件3. 本地浏览其中包含源码，example/App.vue 为使用示例。$ git clone ...
live2d-widget网页看板娘 v0.8.2
04-22
live2d-widget特性在网页中添加Live2D看板娘。兼容PJAX，支持无刷新加载。 警告：本项目使用了大量 ES6 语法，不支持 IE 11 等老旧浏览器。你也可以在允许的范围内进行二次开发，这里有一些示例 demo.html ，展现...
assets_live2d网页_live2d网页_live2d网页_VScode看板娘_网站编程_
10-04
接下来，我们要在网页中嵌入Live2D看板娘，这通常涉及以下几个步骤： 1. **模型制作**：首先，你需要有一个Live2D模型，这可以通过专门的软件如Live2D Cubism Editor来创建。模型包括人物的各个部分，如头部、身体...
nuxt看板娘.zip
10-10
看板娘
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 472
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1302
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1084
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 155
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
博客添加live2d看板娘代码
03-01
很高兴回答你的问题！如果你想添加Live2D看板娘代码到你的博客，你可以参考这个教程：https://blog.csdn.net/weixin_42891510/article/details/104062256。希望能帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值