看板娘

1.确保申请JS权限已通过

2.进入博客后台文件系统

https://i.cnblogs.com/Files.aspx

需要上传的文件

waifu.css
waifu1.css
live2d.min.js
waifu-tips.js
flat-ui.min.css

将下载好的看板娘样式文件进行上传

如何实在懒得找可以输入我的文件地址保存我的样式代码

将如下代码放在博客侧边栏公告那个框里(其实那三个框都可以)

<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://blog-static.cnblogs.com/files/reasonzzy/waifu1.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/reasonzzy/waifu1.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://blog-static.cnblogs.com/files/reasonzzy/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/reasonzzy/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/reasonzzy/flat-ui.min.css"/>
waifu.css   看板娘位置在左边waifu1.css  看板娘位置在右边

原文地址:https://www.cnblogs.com/reasonzzy/p/11507316.html

时间: 2024-10-11 09:52:27

看板娘的相关文章

博客园美化——看板娘

一直有人问我左下角的看板娘是怎么加上去的 刚开始看别人的随笔看得一脸懵逼,自己捣鼓个好久才弄好的 于是就想写一篇容易看懂的随笔 1.下载模型相关文件(点击推荐和关注才能下载哦QWQ) 打开压缩包后就是这么一堆东西 2.将文件上传到博客园 只要上传 waifu.css waifu-tips.js live2d.js 3.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head

博客园引入半透明的看板娘

参考:https://www.cnblogs.com/zzc2018/p/10662149.html 代码(添加在设置的博客侧边栏公告下) <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> <script> L2Dwidget.init({ "model":

美化你的博客园——添加看板娘

做了一个我认为比较浅显易懂的随笔 分为三步 目录 1.压缩包下载(点击下载) 2.上传文件 3.添加代码 具体实施 1.首先下载一个压缩包 /---压缩包下载---/ 2.上传文件 3.添加代码 将代码粘贴(你要抄一遍我也没有办法)到页脚Html代码 不知道怎么放的请看我上一篇随笔 1 <!DOCTYPE html> /*看板娘*/ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

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

效果图 这只是静态图片,需要参考请看右下角 需要用到的资源(上传到博客园后台) 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"/>

看板娘相关源码介绍

做个记录,看到好玩的东西,看板娘如下: 下面的源码主要来自博客:https://www.cnblogs.com/zjfjava/p/9100898.html 是自己扣下来的,做了点调整,如果添加到你自己的博客没有效果可能是js冲突等,自己解决. <style> .lktest { left: 0px !important; } </style> <script src="https://cdn.jsdelivr.net/npm/[email protected]/l

3行代码 为你的网站博客添加萌萌哒可爱二次元女动漫玩偶人物(看板娘)

看板娘一词源自日语“看板娘(かんばんむすめ)”.其中的“看板”指的是店面招牌,或者是为了宣传.打广告而制作的宣传牌.“看板娘”也就是店面的招牌姑娘,亦即能够提升店面人气和顾客流量的女服务生.女店员等.也就是说,看板娘本身就是一块“活看板”,其本身的魅力就能够起到宣传.拉人气的作用.英语又称之为“Poster Girl”. 默认只在PC端才会显示 (手机屏幕太小, 放上看板娘容易遮挡内容, 体验不好): 效果如图所示: 可以玩射击游戏, 被射击到的网页元素会消失 里面的子弹可以穿越屏幕边缘的哦(空

博客园live2d 看板娘 简单 光速

博客园live2d 看板娘 简单 光速 直接粘贴到--博客侧边栏公告,需要JS支持 <!-- live2d --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Live2D<

嗯 第一来着先领养一只看板娘把

<script type="text/javascript"> /* 把 autoload.js 内容直接内置 */ $('body').append('<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas>

给网页添加看板娘

在大佬哪里嫖来了文件,在本地打开只有人物 旁边的栏目和头顶的文字框都不能用,所以我给隐藏了 不知道是为什么 可能我是个菜鸡吧 点文件下载即可 下载链接      http://yk1981268324.gz01.bdysite.com/index3.html 把以下代码补全,放在下载文件同文件夹 希望有大佬指点以下 <link rel="stylesheet" type="text/css" href="assets/waifu.min.css?v=