zoukankan      html  css  js  c++  java
  • live2d 快速实现好看的看板娘特效

    第一种:直接引用下方文件,实现简单的看板娘效果;
    https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json   
    <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>
    <script>
        L2Dwidget.init({
            "model": { jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", "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>
     
    第二种:
      页首Html代码:

    <!-- 左下角live2d 看板娘 -->
    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/jerque/flat-ui.min.css"/> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/jerque/waifu.css"/>

    博客侧边栏公告

    <!-- 左下角live2d 看板娘(支持换肤等) -->
    <div class="waifu" id="waifu">
      <div class="waifu-tips" style="opacity: 1;"></div>
      <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
    
    <script src="https://blog-static.cnblogs.com/files/jerque/live2d.min.js"></script>
    <script src="https://blog-static.cnblogs.com/files/jerque/waifu-tips.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">initModel()</script>

    参考:https://www.cnblogs.com/yjlaugus/p/8724881.html#/c/subject/p/8724881.html

  • 相关阅读:
    005. Asp.Net Routing与MVC 之三: 路由在MVC的使用
    004. Asp.Net Routing与MVC 之二: 请求如何激活Controller和Action
    001. Asp.Net Routing与MVC 之(基础知识):URL
    002. Asp.Net Routing与MVC 之(基础知识):HttpModule 与 HttpHandler
    003. Asp.Net Routing与MVC 之一: 请求如何到达MVC
    Factory
    decorator
    Java 单例真的写对了么?
    Dubbo Jackson序列化使用说明
    使用JavaConfig方式配置dubbox
  • 原文地址:https://www.cnblogs.com/jerque/p/15262864.html
Copyright © 2011-2022 走看看