如何实现在网站页面右下角添加悬浮动态卡通公仔网页特效

网上找资料的时候 看到一些网页上会有个二次元卡通公仔，悬浮在页面上，而且公仔的视线方向还会随着鼠标的位置而转动，感觉挺有趣挺好奇是怎么做到的，就自己在网上找了下最终实现了效果并放不到了自己的网站上，算是给单调的内容添加点趣味性，效果可以查看本站页面的右下角卡通小人。

这里贴一下自己的代码 实现比较简单 源码PC下载可以查看页面右侧相关下载栏目

var L2DwidgetCDN = "https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js";

loadScriptAsync(L2DwidgetCDN).then(() => {
            //这里使用了异步加载的方式 避免cdn挂了导致页面其他js出问题，这个方式也可以避免修改前端html 只修改js文件即可
            try {
                load2cs();
            } catch (e) {

            }
});


function load2cs() {
            var childs = [];//存放不同的公仔
            childs.push("https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json");
            childs.push("https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json");
            L2Dwidget.init({
                "model": {
                    jsonPath: childs[childs.length-1],
                    "scale": 1
                },
                "display": {
                    "position": "right",
                    "width": 120,
                    "height": 300,
                    "hOffset": 15,
                    "vOffset": 20
                },
                "mobile": {
                    "show": false,
                    "scale": 0.3
                },
                "react": {
                    "opacityDefault": 0.8,
                    "opacityOnHover": 0.1
                }
            });
        }