zoukankan      html  css  js  c++  java
  • 《博客园美化》为您的博客增加一个萌萌的看板娘吧

    效果图

    这只是静态图片,需要参考请看右下角

    需要用到的资源(上传到博客园后台)

    • waifu.css
    • waifu-tips.js
    • live2d.js

    HTML代码实现

    <!DOCTYPE html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/chensv/waifu.css"/>
       <!-- 引入css字体文件 --> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.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://blog-static.cnblogs.com/files/chensv/waifu.css"> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;"></div> <canvas id="live2d" width="400" height="380" 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/chensv/live2d.js"></script> <script src="https://blog-static.cnblogs.com/files/chensv/waifu-tips.js"></script> <script type="text/javascript">initModel()</script> </body> </html>

    html代码就放在侧边栏,这里值得注意的是,博主必须拥有js权限才能够使用js文件,如果没有权限,需要申请js权限,一般一天内就可以得到回复

    注意这里把文件链接改成自己的链接

    百度网盘资源下载

    https://pan.baidu.com/s/1Y5cWwmPB0QIwUPTsQd56_A

    提取码:dg8e

  • 相关阅读:
    洛谷P1083 借教室
    洛谷 P1311 【选择客栈】
    一些加快 程序运行速度的方法
    【CYH-02】noip2018数论模拟赛:赛后题解
    【CYH-02】noip2018数论模拟赛:比赛通知栏
    洛谷P2888 [USACO07NOV]牛栏Cow Hurdles
    洛谷P2299 Mzc和体委的争夺战 题解
    洛谷P1113 杂务
    洛谷 P1635 跳跃
    LightOJ1119 Pimp My Ride(状压DP)
  • 原文地址:https://www.cnblogs.com/chensv/p/11303246.html
Copyright © 2011-2022 走看看