博客园引入半透明的看板娘

参考:https://www.cnblogs.com/zzc2018/p/10662149.html

代码(添加在设置的博客侧边栏公告下)

<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/[email protected]/assets/chitose.model.json",<!--这里改模型,前面后面都要改-->
            "scale": 1
        },
        "display": {
            "position": "right",<!--设置看板娘的上下左右位置-->
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,<!--设置透明度-->
            "opacityOnHover": 0.2
        }
    });
</script>

  

可替换的模型名称

2D模型全名称:

  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haruto
  • live2d-widget-model-hibiki
  • live2d-widget-model-hijiki
  • live2d-widget-model-izumi
  • live2d-widget-model-koharu
  • live2d-widget-model-miku
  • live2d-widget-model-ni-j
  • live2d-widget-model-nico
  • live2d-widget-model-nietzsche
  • live2d-widget-model-nipsilon
  • live2d-widget-model-nito
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo
  • live2d-widget-model-tsumiki
  • live2d-widget-model-unitychan
  • live2d-widget-model-wanko
  • live2d-widget-model-z16

原文地址:https://www.cnblogs.com/yingyigongzi/p/11016657.html

时间: 2024-10-12 02:26:16

博客园引入半透明的看板娘的相关文章

《博客园美化》为您的博客增加一个萌萌的看板娘吧

效果图 这只是静态图片,需要参考请看右下角 需要用到的资源(上传到博客园后台) waifu.css waifu-tips.js live2d.js HTML代码实现 <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/chensv/waifu.css"/>

博客园美化——看板娘

一直有人问我左下角的看板娘是怎么加上去的 刚开始看别人的随笔看得一脸懵逼,自己捣鼓个好久才弄好的 于是就想写一篇容易看懂的随笔 1.下载模型相关文件(点击推荐和关注才能下载哦QWQ) 打开压缩包后就是这么一堆东西 2.将文件上传到博客园 只要上传 waifu.css waifu-tips.js live2d.js 3.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head

博客园live2d 看板娘 简单 光速

博客园live2d 看板娘 简单 光速 直接粘贴到--博客侧边栏公告,需要JS支持 <!-- live2d --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Live2D<

简单改造丨让你的博客园焕然一新

一直想弄一个blog. 主流的有csdn.博客园,csdn上广告太多,有时候必须得登录才能看到一些内容,让我非常反感.相比之下,博客园则清爽很多,使用了一段时间,但还是觉得不便.主要是上传文章经常会有格式问题,其次就是博客园的界面太老旧了. 后来就尝试在github pages上搭建Jekyll.Hexo,很geek,玩法很多.但要我自己维护还是有点折腾,我只想要一个写东西的地方,看得顺眼就行. 之后,我无意发现博客园的主题也是支持定制的,让我眼前一亮.这里贴一个教程.[详细图解]一步一步教你自

两分钟搞定博客园自定义样式

整体皮肤样式 选用的是在 SimpleMemory 基础上进行改造.所以注意:引用模板css样式取药取消勾选 将以下样式复制到 页面定制CSS代码 中: #home h1{ font-size:45px; } body{ // background-image: url("https://www.cnblogs.com/images/cnblogs_com/lvonve/1497718/o_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190706122237.j

博客园添加背景音乐,背景效果!

目录 博客园添加背景音乐,背景效果 申请博客园JS权限 添加网易云背景音乐 点击鼠标点击样式 二次元看板娘 雪花效果 原文地址:https://www.cnblogs.com/1212dsa/p/11438461.html

博客园页面美化

对以前的我来说,我觉得博客只有自己搭建的才有页面美化,像博客园这样的可能没有.但是,突然有一天在我查资料的时候,发现了一篇很好看的博客,我就留意了一下他的域名,发现竟然是博客园的.就开始决定把自己的博客弄的好看一点. 关于博客应该如何去美化,我就不讲了,自己去设置里面看的到,之后开启过JS权限之后就可以开始自己的美化了. 关于我为啥要写这篇博客,主要原因是,网上关于博客美化的博客太散了,没有那种比较全面的讲解,于是我就想弄一个,以便后面的人做个参考. 首先是选择博客的皮肤: 毕竟自己不能从零开始

[Demo]提取个人博客园闪存+评论

还在折腾中,这里是我抓取第一页的结果,发现还是有细节要处理,等完善后再发代码 脚本:Perl OK<img src=" <a href="http://static.cnblogs.com/images/ing_lucky.png"" target="_blank" class="gray">static.cnblogs.com...</a>  class="ing_icon_lucky

C# 中使用System.Net.Http.HttpClient 模拟登录博客园 (GET/POST)

一. System.Net.Http.HttpClient简介 System.Net.Http 是微软.net4.5中推出的HTTP 应用程序的编程接口, 微软称之为“现代化的 HTTP 编程接口”, 主要提供如下内容: 1. 用户通过 HTTP 使用现代化的 Web Service 的客户端组件: 2. 能够同时在客户端与服务端同时使用的 HTTP 组件(比如处理 HTTP 标头和消息), 为客户端和服务端提供一致的编程模型. 个人看来是抄袭apache http client ,目前网上用的