《博客园美化》为您的博客增加一个萌萌的看板娘吧

效果图

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

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

  • 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/1gTGI5H3NfPcjQ7EX7nDtIQ

提取码:jyfz

原文地址:https://www.cnblogs.com/chensv/p/11303246.html

时间: 2024-11-03 01:18:26

《博客园美化》为您的博客增加一个萌萌的看板娘吧的相关文章

博客园美化教程大集合(超详细,看这篇就够了)

阅读目录: 1. 前言 2. 定制自己的博客 0. 美化整体效果 1. 准备工作 2. 自定义个性化导航栏 3. 添加顶部博主信息 4. 添加顶部滚动公告 5. 为博客文章添加目录导航 6. 添加分享功能按键 7. 定制推荐和反对按键的炫酷样式 8. 添加快速返回顶部的功能按键 9. 添加打赏功能按键 10. 添加页面放大缩小功能按键 11. 添加Github图标及链接 12. 添加公告栏图片 13. 添加公告栏文字信息 14. 添加公告栏个性时钟 15. 为公告栏添加访客来源统计 16. 为公

博客园美化资源网站链接

详谈如何定制自己的博客园皮肤(禁用css模板级别) 博客美化汇总 NSDog 博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了) 博客园美化教程第二篇----极致个性化你的专属博客(为博客添加背景音乐插件,调整页面布局等) 原文地址:https://www.cnblogs.com/CH520/p/9813646.html

博客园美化首页随笔展示美化

博客园美化首页随笔展示美化 一.css .postDesc-img { position: absolute; padding-bottom: 0; float: right; right: 0; bottom: 0; z-index: -1; } .cnblogs-post-body h3 { text-decoration: none; font-size: 10px; line-height: 1px; } .cnblogs-post-body h2 { color: red; font-

博客园美化夜间模式

博客园美化夜间模式 一.点击控制样式 主要看思路,自己增删改查,里面样式只针对我的博客 一.触发点击 二.修改按钮样式以及对于类名 三.将模式信息存入sessionStorage中 四.更具按钮的类名,自己博客样式进行跟换 <!--夜间模式点击事件js--> <script > let night_close = document.querySelector('.night-close')||document.querySelector('.night-open'); night_

博客园美化博客随笔目录

博客园美化博客随笔目录 基于孤傲苍狼在2014-5-11写的目录代码基础上进行改进 一.js代码 <!--目录--> <script type="text/javascript"> var BlogDirectory = { /* 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top) */ getElementPosition:function (ele) { var topPosition = 0; var leftPosition

Windows live Writer博客园,51CTO,网易博客,新浪博客配置方法

今天使用微软的Windows live Writer进行了博客园,51CTO,网易博客,新浪博客的博客发布.感觉效果不错,特别分享给大家.由于csdn账号忘记,所以... 先截个图给大家看下: 说下这款工具的作用吧,很多人在不同的博客网站申请了自己的博客,那么你是否还在为使用Ctrl+C的方式来达到博客的同步呢?如果答案是yes,那么强烈建议你使用Windows live Writer这款工具.当然你也可以实现Metaweblog API实现自己的博客发布器.甚至可以让微博同步博客,这都是可以的

博客园美化操作

之所以写这篇文章的原因了主要就是博客园的默认样式太单一,而且很多人都在用,就想与众不同一样,不做大多数 准备工作 想要美化自己的博客园默认界面,首先需要申请js权限 步入正题 当你的这一步做完之后就可以开始给博客化妆了 #########################################页面标题样式================================ #cnblogs_post_body { color: black; font: 0.875em/1.5em "微软雅黑

[美化] 博客园美化历程

目录 开端 具体的css 净化页面 标题的蜜汁动画 改一下主页的比例 另一些改动 侧边栏的html js代码的添加 在没有目录的情况下不显示目录 在url存在 article 的时候不显示版权声明 js附带的css js完整代码 结语 标题上写着美化,但怎么看自己的界面,仿佛每条线都在呐喊着:"实际上是简化吧!" /扶额 在入驻博客园的一周时间里,我使用各种课上时间抽空研究了一下博客园的页面定制CSS代码.HTML和JS这些看了半天也搞不明白的东西,并将原来的模板"Simpl

博客园美化

侧栏字体更改 1 .catListTitle { 2 font-weight: bold; 3 line-height: 1.2; 4 margin-top: 21px; 5 margin-bottom: 10.5px; 6 border-left:10px solid #008000; 7 padding: 10px 0 10px 14px; 8 text-align: left; 9 font-family: 微软雅黑; 10 } 11 #profile_block { 12 font-fa