zoukankan      html  css  js  c++  java
  • 美化——看板娘

    看板娘

    感觉博客园的模板有点单调,自己找了一些方法添加一些人物---看板娘,效果还行,就记录一下

    1.下载相关文件

    解压就是这些

    2.将文件上传到博客园

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

    3.实现代码

    把代码放到脚本HTML代码处

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     5     <title>Live2D</title>
     6      
     7     <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/lanyincao/waifu.css"/>
     8     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
     9 </head>
    10 <body>
    11     <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/lanyincao/waifu.css">
    12                                                                         
    13                                                                                                           
    14     <div class="waifu" id="waifu">
    15         <div class="waifu-tips" style="opacity: 1;"></div>
    16         <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    17         <div class="waifu-tool">
    18             <span class="fui-home"></span>
    19             <span class="fui-chat"></span>
    20             <span class="fui-eye"></span>
    21             <span class="fui-user"></span>
    22             <span class="fui-photo"></span>
    23             <span class="fui-info-circle"></span>
    24             <span class="fui-cross"></span>
    25         </div>
    26     </div>
    27     <script src="https://files.cnblogs.com/files/lanyincao/live2d.js"></script>
    28     <script src="https://files.cnblogs.com/files/lanyincao/waifu-tips.js"></script>
    29     <script type="text/javascript">initModel()</script>
    30 </body>
    31 </html>
    32 <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

    4.修改

    将文件地址换成自己文件的地址

    5.效果

    
    
    
  • 相关阅读:
    类目(分类)
    协议(Protocol)---实例
    OC 复合 组装电脑
    iOS--九宫格奥秘(UIView)(arc4random)
    字符串
    oc 字符串
    七星彩问题
    OC--第一个程序
    关于行内元素垂直居中的一个小小trick
    关于orgChart
  • 原文地址:https://www.cnblogs.com/lanyincao/p/11768113.html
Copyright © 2011-2022 走看看