最近一直在搞 Live2d 的模型玩儿，遂发现，现在大部分的模型都是 V2 版本的，也就是 “Cubism2” 制作的模型，最新的 Cubism 官方已经发布到 V4 “Cubism4” ，初步学习了一下，每一代的模型都是更加精细，动画效果更好。“Cubism2” 目前是大部分 Web上显示的版本，博客添加看板娘啊，添加live2d人物啊，都是V2的。

V3 (moc3) 版本的在 Web 上也有，尝试把 V3 版本也做成 V2 版本添加的方式，一番尝试后，发现 V3 直接用 V2 添加的方式效果并不理想，V3加载的资源较多，没有V2的轻量，其次是V3的模型有些是带背景的，目前找到的模型素材是 “ 碧蓝航线 Azue Lane/Azue Lane ” 大部分都有背景，整体缩小放在页面角落里 显示效果并不是很好。一番把玩儿后，还是觉得做成导航页比较好。 效果

导航页在此基础上进行的修改

渐变响应式 HTML5 导航页

之前的导航页视觉疲劳了，新做了一个渐变式的，为方便大家，去掉所有本地依赖，全部资源 在线引入，就一个单页HTML，...

 
下载：index.zip

部署：静态页面，随意部署

配置：如下 代码，都加了注释的

<!DOCTYPE HTML>
<!--Eventually by HTML5 UP [email protected] Free for personal and commercial use under the CCA 3.0 license(html5up.net/license)-->
<html>
<head>
    <!-- 名称 -->
    <title>爆胎</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="js/main.css" />
    <link rel="stylesheet" href="https:[email protected]/css/font-awesome.min.css">

     <!-- 渐变背景CSS -->
    <style type="text/css">
        #canvas-basic {
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -999;
        }
        </style>
</head>
<body class="is-preload">
        <!-- 模型初始化 -->
        <div class="Canvas" id="L2dCanvas" ></div>

        <!-- 渐变背景初始化 -->
        <canvas id="canvas-basic"></canvas>

        <!-- 图标按钮 -->
        <header id="header">
            <footer id="footer">
                <ul class="icons">
                    <li>
                        <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=546960041&amp;site=qq&amp;menu=yes" class="fa fa-qq fa-2x">
                            <span class="label">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="https://github.com/x0620x" class="fa fa-github fa-2x">
                            <span class="label">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="mailto:[email protected]" class="fa fa-envelope-o fa-2x">
                            <span class="label">
                            </span>
                        </a>
                    </li>
                    <li>
                        <!-- 模型切换按钮 -->
                        <a href="javascript:change();" class="fa fa-user-circle fa-2x">
                            <span class="label">
                                
                            </span>
                        </a>
                    </li>
                </ul>
            </footer>

            <!-- 文字按钮 -->
                <p>
                    <a href="https://www.itggg.cn">BLOG</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="https://p.tiax.cn">PAN</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="https://api.itggg.cn">API</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="https://travellings.link">Travellings</a>
                </p>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/live2dcubismcore.min.js"></script>
<script src="js/pixi.min.js"></script>
<script src="js/live2dcubismframework.js"></script>
<script src="js/live2dcubismpixi.js"></script>
<script src="js/l2d.js"></script>
<script src="js/main.js"></script>
<script src="js/granim.min.js"></script>

<!-- 模型名称 -->
<script>
    let role = ['aierdeliqi_4,','aidang_2','aierdeliqi_4','aimierbeierding_2','aimierbeierding_3','aisaikesi_4','banrenma_2','beikaluolaina_2','biaoqiang_3','bisimai_2','boyixi_2','bulaimodun_4','chaijun_3','chaijun_4','chuixue_3','dafeng_2','dafeng_4','daofeng_4','dujiaoshou_4','dujiaoshou_6','dunkeerke_2','edu_3','edu_4','genaisennao_2','guangrong_3','heitaizi_2','hemin_2','hemin_3','huangjiafangzhou_3','huonululu_3','huonululu_5','jialisuoniye_3','jialisuoniye_4','jianye_2','jianye_2_hx','junhe_5','kelifulan_3','kubo_2','lafei','lafei_4','lingbo','lingbo_10','linuo_3','lisailiu_2','lisailiu_3','longfeng_2','luyijiushi_2','mingshi','nengdai_2','ninghai_4','ougen_5','ouruola_4','pinghai_4','pinghai_6','qibolin_2','qiye_7','rangbaer_3','rangbaer_4','shengluyisi_2','shengluyisi_3','shitelasai_2','sipeibojue_5','taiyuan_2','tianlangxing_3','tierbici_2','weineituo_2','weixi_2','weiyan_2','wuqi_2','xianghe_2','xixuegui_4','xuefeng_3','xukufu_2','xukufu_3','xukufu_3_hx','yichui_2','z23','z46_2','z46_3','z46_4','zhala_2',]
    // 生成一个1-4的随机数
    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    function change(){
        var config = {
        width: window.innerWidth,
        height: window.innerHeight,
        left: '0',
        bottom: '-10px',
        basePath: '//itggg.cn/bilanhxmoc3',
        role: role[randomNum(0,80)],
        opacity: 1,
        mobile: true
        }
        var v = new Viewer(config); 
    }
    change()
</script>

<!-- 渐变背景颜色 -->
<script>
var granimInstance = new Granim({
    element: '#canvas-basic',
    direction: 'left-right',
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                // 渐变背景颜色，可添加或修改
                ['#15559a', '#c04851'],
                ['#73575c', '#131824'],
                ['#7c1823', '#4e2a40']
            ]
        }
    }
});
</script>

</html>

 

页面压缩参考格式：

<!DOCTYPE HTML><!--Eventually by HTML5 UP [email protected] Free for personal and commercial use under the CCA 3.0 license(html5up.net/license)--><html><head><title>爆胎</title><meta charset="utf-8"/><meta name="viewport"content="width=device-width, initial-scale=1, user-scalable=no"/><link rel="shortcut icon"href="./favicon.ico"type="image/x-icon"/><link rel="stylesheet"href="js/main.css"/><link rel="stylesheet"href="https:[email protected]/css/font-awesome.min.css"><style type="text/css">#canvas-basic{position:absolute;display:block;width:100%;height:100%;top:0;right:0;bottom:0;left:0;z-index:-999}</style></head><body class="is-preload"><div class="Canvas"id="L2dCanvas"></div><canvas id="canvas-basic"></canvas><header id="header"><footer id="footer"><ul class="icons"><li><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=546960041&amp;site=qq&amp;menu=yes"class="fa fa-qq fa-2x"><span class="label"></span></a></li><li><a href="https://github.com/x0620x"class="fa fa-github fa-2x"><span class="label"></span></a></li><li><a href="mailto:[email protected]"class="fa fa-envelope-o fa-2x"><span class="label"></span></a></li><li><a href="javascript:change();"class="fa fa-user-circle fa-2x"><span class="label"></span></a></li></ul></footer><p><a href="https://www.itggg.cn">BLOG</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="https://p.tiax.cn">PAN</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="https://api.itggg.cn/index">API</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="https://travellings.link">Travellings</a></p></body><script src="js/jquery.min.js"></script><script src="js/live2dcubismcore.min.js"></script><script src="js/pixi.min.js"></script><script src="js/live2dcubismframework.js"></script><script src="js/live2dcubismpixi.js"></script><script src="js/l2d.js"></script><script src="js/main.js"></script><script src="js/granim.min.js"></script><script>let role=['aierdeliqi_4,','aidang_2','aierdeliqi_4','aimierbeierding_2','aimierbeierding_3','aisaikesi_4','banrenma_2','beikaluolaina_2','biaoqiang_3','bisimai_2','boyixi_2','bulaimodun_4','chaijun_3','chaijun_4','chuixue_3','dafeng_2','dafeng_4','daofeng_4','dujiaoshou_4','dujiaoshou_6','dunkeerke_2','edu_3','edu_4','genaisennao_2','guangrong_3','heitaizi_2','hemin_2','hemin_3','huangjiafangzhou_3','huonululu_3','huonululu_5','jialisuoniye_3','jialisuoniye_4','jianye_2','jianye_2_hx','junhe_5','kelifulan_3','kubo_2','lafei','lafei_4','lingbo','lingbo_10','linuo_3','lisailiu_2','lisailiu_3','longfeng_2','luyijiushi_2','mingshi','nengdai_2','ninghai_4','ougen_5','ouruola_4','pinghai_4','pinghai_6','qibolin_2','qiye_7','rangbaer_3','rangbaer_4','shengluyisi_2','shengluyisi_3','shitelasai_2','sipeibojue_5','taiyuan_2','tianlangxing_3','tierbici_2','weineituo_2','weixi_2','weiyan_2','wuqi_2','xianghe_2','xixuegui_4','xuefeng_3','xukufu_2','xukufu_3','xukufu_3_hx','yichui_2','z23','z46_2','z46_3','z46_4','zhala_2',]
function randomNum(min,max){return Math.floor(Math.random()*(max-min+1)+min)}function change(){var config={width:window.innerWidth,height:window.innerHeight,left:'0',bottom:'-10px',basePath:'https://itggg.cn/bilanhxmoc3',role:role[randomNum(0,80)],opacity:1,mobile:true}
var v=new Viewer(config)}change()</script><script>
var granimInstance=new Granim({element:'#canvas-basic',direction:'left-right',isPausedWhenNotInView:true,states:{"default-state":{gradients:[['#15559a','#c04851'],['#73575c','#131824'],['#7c1823','#4e2a40']]}}});</script></html>

 
V2具体：详见这篇文章

渲染：pixi-live2d-display

模型：Live2d-model

渐变背景颜色：中国传统颜色

Last modification：November 17, 2022
© Allow specification reprint
如果你想请我喝奶茶的话