Vue最简单的实现网页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代码申请一下就行了。

看一下我的效果:


在这里插入图片描述

结尾(后续更新更强的配置看板娘~)

以上就是今天要讲的内容,本文仅仅简单的使用了看板娘,更多骚操作请自行百度,就到这里了,告辞~
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

辰鬼丫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值