Vue最简单的实现网页Live2D看板娘
Live2D看板娘
前言
最近想给自己的网页添点新花样,然后就想到了别人的网站都有一些看板娘的玩意儿,看着很舒服,鉴于自己也没玩过,就鼓捣了一会儿。发现实现的模型还挺多。我这里呢,就简化一下,弄一个最简单在vue中的教程。
二、使用步骤
1.引入
在index.html页面映入js:
<!-- 看板娘 -->
<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({
"display": {
"superSample": 2,
"width": 200,
"height": 400,
"position": "left",//设置看板娘的位置
"hOffset": 0,
"vOffset": 0
}
});
</script>
2.设置样式
有能力的也可以自行修改css样式:
/* 看板娘样式设置 */
#live2dcanvas {
border: 0 !important;
}
这样就可以看到一个呆萌的看板娘,如果需要放到自己的博客里看的话只需要在设置里的页面定制CSS代码和JS上加上下面的代码,如果不支持JS代码申请一下就行了。
看一下我的效果:
结尾(后续更新更强的配置看板娘~)
以上就是今天要讲的内容,本文仅仅简单的使用了看板娘,更多骚操作请自行百度,就到这里了,告辞~
Vue最简单的实现网页Live2D看板娘的更多相关文章
- Hexo 添加Live2D看板娘
title: Hexo 添加 Live2D看板娘 二次元什么的最喜欢了[大好きです] 准备 项目地址 live2d模型 部分模型预览 开始 首先进入Hexo博客根目录安装live2d插件 $ npm ...
- 文章中左下角的妹子live2d看板娘
关键词: live2d看板娘 自行搜索即可 攻略很多
- 博客美化—添加萌萌的live2D看板娘(不能再简单了)
看着很多博客都有live2D的萌萌哒看板娘,我闲着有空说干就干. 从参考博客的附件中下载资源文件 waifu.css waifu-tips.js live2d.js flat-ui.min.css// ...
- 网页添加Live2D看板娘简易教程
看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一.简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义. 如果想在自己的博客上放一个呆萌的看板娘非 ...
- 网页添加 Live2D 看板娘
我是先参考别人的[点击跳转]博客来做的.不过我发现网上很多人都没有把一些细节写出来,用了别人那里下载的文件后里面的一些跳转链接就跳到他们的页面了.所以我这里写一写如何修改这些跳转链接吧. 1. ...
- 网页添加Live2D看板娘
看板娘简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义. 如果想放一个呆萌的看板娘在博客上 js <script type="text/j ...
- 在网页添加 Live2D 看板娘
只需要将以下代码粘贴到 标签中即可 <!--看板娘--> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jqu ...
- Hexo添加Live2D看板娘+模型预览
文章目录 添加和注意事项 模型预览 live2d-widget-model-chitose live2d-widget-model-epsilon2_1 live2d-widget-model-gf ...
- Vue看板娘教程1.0
Live2D看板娘 前言(PS:本教程使用的Vue项目) 一.下载文件 二.使用步骤 1.引入文件 2.引入js 3.修改app.vue 4.如何换模型? 更换模型的效果 5.如何换语音? 结尾(后续 ...
随机推荐
- App 后台架构
转载请注明出处:http://blog.csdn.net/smartbetter/article/details/53933096 做App做的久了,就想研究一下与之相关的App后台,发现也是蛮有趣的 ...
- 实在解决不了丢失vs2019之类的msvcr110.dll之类的问题
因为msvcr110.dll也是微软DirectX的一个组件 如果在下载VC运行库没用的情况下,可能是因为要运行的程序是win32的,但是电脑和下载的程序是64的,所以 下载一个win32的即可 如果 ...
- Dev中配置graphcis.h
下载地址:http://winbgim.codecutter.org/ 搞得自己有点奔溃 没成功 尝试了全网的所以的方法都没成功
- Learn day5 迭代器\生成器\高阶函数\推导式\内置函数\模块(math.time)
1.迭代器 # ### 迭代器 """能被next调用,并不断返回下一个值的对象""" """ 特征:迭代器会 ...
- 833. Find And Replace in String —— weekly contest 84
Find And Replace in String To some string S, we will perform some replacement operations that replac ...
- 直播带货APP源码开发为什么选择云服务器
云服务器可以为直播带货APP源码提供弹性计算以及更高的运行效率,避免资源浪费,随着直播带货APP源码业务需求的变化,可以实时扩展或缩减计算资源.CVM支持按实际使用的资源计费,可以节约计算成本. 一. ...
- Linux 软件安装的三种方式
Linux 软件安装的三种方式 1.yum 语法格式: yum -y install package.name -y yes # 遇到提示自动输入yes 案例: 安装ifconfig命 ...
- asp.net 页面,文字自适应手机屏幕
(1)在<head>和</head>之间插入代码. <meta name="viewport" content="width=device- ...
- Effective Modern C++ ——条款7 在创建对象时注意区分()和{}
杂项 在本条款的开头书中提到了两个细节性问题: 1.类中成员初始化的时候不能使用小括号. 如: class A { int a(0);//错误 }; 2.对于原子性类别的对象初始化的时候不能使用= 如 ...
- 认识Javascript中的作用域和作用域链
作用域 只要写过java或者c#等语言的同学来说,相信一定能理解作用域的概念,在作用域的范围中,我们可以使用这个作用域的变量,对这个变量进行各种操作.可是,当使用Javascript的时候,相信很多的 ...