用html代碼給網頁加個live2d看板娘吧


直接粘貼以下代碼(靜態網頁在_config.yml中添加,博客園在頁尾html中加):

              <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Pio@2.4/static/pio.min.css"
              />
              <script
                async="async"
                src="https://cdn.jsdelivr.net/combine/gh/Dreamer-Paul/Pio@2.4/static/l2d.min.js,gh/Dreamer-Paul/Pio@2.4/static/pio.min.js"
                onload='
                  let pio_container = document.createElement("div");
                  pio_container.classList.add("pio-container");
                  pio_container.classList.add("right");
                  pio_container.style.bottom = "-2rem";
                  pio_container.style.zIndex = "1";
                  document.body.insertAdjacentElement("beforeend", pio_container);
                  let pio_action = document.createElement("div");
                  pio_action.classList.add("pio-action");
                  pio_container.insertAdjacentElement("beforeend", pio_action);
                  let pio_canvas = document.createElement("canvas");
                  pio_canvas.id = "pio";
                  pio_canvas.style.width = "14rem";
                  pio_canvas.width = "600";
                  pio_canvas.height = "800";
                  pio_container.insertAdjacentElement("beforeend", pio_canvas);
                  let pio = new Paul_Pio({
                    "mode": "fixed",
                    "hidden": true,
                    "content": {
                      "link": ["https:\/\/AbnerHung.github.io"],
                      "skin": ["要換成我的朋友嗎?", "讓她放個假吧~"],
                      "hidden": true,
                    },
                    "model": [
                      "https:\/\/cdn.jsdelivr.net/gh/xiaoski/live2d_models_collection/mikoto/mikoto.model.json",
                      "https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/tororo/tororo.model.json",
                      "https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/platelet-2/model.json",
                      "https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/xiaomai/xiaomai.model.json",
                      "https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/mashiro/seifuku.model.json",
                      "https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/Violet/14.json",
                      "https:\/\/cdn.jsdelivr.net/gh/xiaoski/live2d_models_collection/Kobayaxi/Kobayaxi.model.json",
                      "https:\/\/cdn.jsdelivr.net/gh/xiaoski/live2d_models_collection/uiharu/uiharu.model.json"
                      ]
                  });'
              ></script>

模型以及js代碼來源於網絡~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM