给网页添加2D卡通形象（形象超全超可爱）

最新推荐文章于 2024-03-20 09:40:12 发布

前端程序猿微凉

最新推荐文章于 2024-03-20 09:40:12 发布

阅读量1.3k

点赞数 1

分类专栏： web前端文章标签： web css

原文链接：https://blog.csdn.net/qq_44273429/article/details/122128027?spm=1001.2014.3001.5501

版权

web前端专栏收录该内容

52 篇文章 0 订阅

订阅专栏

显示效果可随着鼠标小规模互动

通过更改路径来改变形象。

💖 各种不同的2D形象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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-miku@1.0.5/assets/miku.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
            //可爱女
            "model": { "jsonPath":"https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },            
            //可爱男
            // "model": {"jsonPath":"https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },            
            // 小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
            // 萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
            // 白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
            // 黑猫： https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.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
            // 茶杯犬：https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
            // 绿毛妹妹：https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json
            // 金龟子妹妹：https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
            // https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json
            // https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json
            // 小阿狸： https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json
            // https://unpkg.com/live2d-widget-model-nietzche@1.0.5/assets/nietzche.model.json
            // https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
            // 女学生： https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json
            "display": { "position": "right", "width": 100, "height": 200, "hOffset": 0, "vOffset": 0 }, 
            "mobile": { "show": true, "scale": 0.5 },
            "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } 
            });
    </script>

</head>
<body>
    
</body>
</html>

原文链接：https://blog.csdn.net/qq_44273429/article/details/122128027?spm=1001.2014.3001.5501