簡單幾步為博客園添加動態動漫妹子
一、效果圖
相信從事技術開發的朋友們,都有自己的博客。
今天我們來講講如何讓自己的博客增加一點色彩。
我們來看一張效果圖:
右下角有個很乖巧的動漫妹子,鼠標移動,妹子會搖頭晃腦~
集成其實很簡單,這是一種2D技術,實現方式有挺多中的,業界有比較多的方案,今天我們講講L2Dwidget。
博客園加入這個集成的效果其實很簡單的,下面我們講講如何在博客里面引入這動漫妹子模型:
二、添加插件
我們在【設置】頁面下方找到【博客側邊欄公告(支持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"> "model": {
jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",//這是插件模型,可以任意選擇想要添加的2d動畫
"scale": 1
},
L2Dwidget.init({ "display": { "superSample": 2, "width": 200,//寬度 "height": 400,//高度 "position": "right",//位置,right,left "hOffset": 0, "vOffset": 0 } }); </script>
這樣我們就看到這個漫畫妹子模型了。
三、更換人物
除了這個妹子以外,還有其他的模型,22款隨君采。那么如何使用其他模型呢?具體操作如下:
在以上代碼中的“model”中的“jsonPath”中的鏈接中,將紅字部分替換為以下模型中任意一個紅字部分即可。
22款模型名稱:
22款模型效果圖地址如下:
https://huaji8.top/post/live2d-plugin-2.0/
好了,以上就是往博客園中加入動態動漫人物的介紹了,喜歡的話支持以下哦~