添加livd2d模型至博客园

免责声明

模型和代码来自https://github.com/fghrsh和https://www.cnblogs.com/yjlaugus大佬，侵删

准备

这个压缩包https://www.lanzous.com/ibho0qd

解压出来就是这三个文件

步骤

上传这三个文件至宁的博客园（博客主页->管理->文件）
复制以下代码至博客侧边栏公告（博客主页->管理->设置->博客侧边栏公告）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/AbnerHung/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/AbnerHung/waifu.css">
    <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://files.cnblogs.com/files/AbnerHung/live2d.js"></script>
    <script src="https://files.cnblogs.com/files/AbnerHung/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

View Code

　　 3.修改代码中live2d.js,waifu.css,waifu-tips.js的地址

　　　（例如，将https://files.cnblogs.com/files/AbnerHung/live2d.js中的AbnerHung替换成宁的博客名）

　　4.保存，回到自己的博客就能看到看板娘啦

最后

由衷感谢fghrsh和yjlaugus两位大佬的开源分享orz

仅供学习交流

添加livd2d模型至博客园

免责声明

准备

步骤

最后

猜你喜欢