如何向自己网页中养一只猫🐱

本篇文章教大家如何给自己的网页添加一个动态模型。

使用插件

WordPress
小白-白酱的插件(22&33 模型):https://moedog.org/946.html
DaiDR 酱的插件(Pio 模型):https://daidr.me/archives/code-176.html
Typecho
泽泽酱的插件(22&33 模型):https://qqdie.com/archives/l2d233.html
保罗酱的插件(Pio 模型):https://paugram.com/coding/add-poster-girl-with-plugin.html
Emlog
广树酱的插件(伊斯特瓦尔模型):https://www.wikimoe.com/?post=75
Z-Blog
FGHRSH 酱的插件(Pio&Tia 模型):https://www.fghrsh.net/post/123.html

不使用插件

如果你的网站没有使用有现成插件的框架,可以直接将代码写入 jsp

依赖类库

<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/live2d-widget-model-hijiki/assets/hijiki.model.json",<!--这里改模型,前面后面都要改-->
              "scale": 1
          },
          "display": {
              "position": "left",<!--设置猫猫的上下左右位置-->
              "width": 100, 
              "height": 200,
              "hOffset": 0,
              "vOffset": 0
          },
          "mobile": {
              "show": true,
              "scale": 0.5
          },
          "react": {
              "opacityDefault": 0.7,<!--设置透明度-->
              "opacityOnHover": 0.2
          }
      });
  window.onload = function(){
       $("#live2dcanvas").attr("style","position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
  }
  </script>

使用浏览器插件在任何网页上都显示
安装插件:https://www.tampermonkey.net/
安装脚本:live2D 看板娘
说明
GitHub 源码:https://github.com/fghrsh/live2d_demo
参考文档:
Live2D demo
网页添加 Live2D 看板娘
给网页添加能动的看板娘(Live2D)-将其添加到网页上吧
在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐