前端动画之二次元

萌娘效果：

代码实现：

// 1.引入js支持
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.0.min.js"></script>
// 2.定义js
<script>
    // 自定义动图列表，刷新页面随机抽取一个二次元人物展示
    var jsonPaths = [
        "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",//萌娘
        "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",//小帅哥
        "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",//小可爱（女）
        "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",//小可爱（男）
        "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",//初音
        "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",//护士姐姐
    ];
    var number = Math.floor(Math.random()*10);
    var jsonPath = jsonPaths[ number > 6 ? 1 : number];
    L2Dwidget.init({
        "model": {jsonPath:jsonPath,"scale": 1 },
        "display": { "position": "left", "width": 150, "height": 300,"hOffset": 0, "vOffset": -20 },
        "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } });
</script>