博客园背景页面动态特效

1.设置动画首先要申请权限

1.1首先进入[我的博客园]，进入[管理]中的[设置]

1.2找到[博客侧边栏公告]，并点击[申请JS权限]

1.3编写申请js权限内容（示例如下）

尊敬的博客园管理员：

请问是否可以帮我开通js权限，我想对文章的样式和布局需要js代码进行调整外观。

谢谢您的帮助。
尊敬的博客园管理员：

您好，我希望用JS美化下我的博客页面，麻烦通过下我的JS权限申请。

谢谢您的帮助。

ps：在申请时，要耐心等待，审核不通过可以多换几个内容试试，我是一次就通过了，大概等了1个小时左右 ^-^ ^-^

1.4通过审核的状态，下面就可以开始设置动态效果了！！

 

2.背景的动态线状粒子特效

2.1鼠标停置，会自动吸附线条，效果图如下

效果演示

2.2首先导入js文件，在这里选择文件——上传就可以了，或者直接用我的src路径（这一步主要是为了给动画js的路径）

js文件连接，复制链接，我的js地址：https://files.cnblogs.com/files/liyhbk/js.js

2.3如果自己上传了文件，获取连接，则将src路径变成自己的

github地址自己可以下载：https://github.com/hustcc/canvas-nest.js/tree/758ef1540b4a9364a211665eb334b514305b9b07

2.4把这段代码复制到————页脚 HTML 代码中

<!-- 线条背景动画 -->
<script src="https://files.cnblogs.com/files/liyhbk/js.js" color="0,0,255" opacity="1" count="119" zindex="-2">
</script>

2.5参数

  • color: 线条颜色，默认：‘0，0，0’；三个数字分别为(R,G,B),注意使用，分割
  • opacity: 线条透明度0~1,默认0.5
  • count: 线条总数量，默认99
  • z-Index: 背景的z-Index属性，css用于控制所在层的位置，默认-1

3.通知栏公告live2D动画

3.1效果图如下：

3.2将此代码贴入侧边公告栏中

复制代码
<!--公告处的人物 -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=UTF-8" />
<title>Live2D</title>

<link rel="stylesheet" type="texts" href="https://blog-static.cnblogs.com/files/monster-jian/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<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/monster-jian/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/monster-jian/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
<link rel="stylesheet" type="texts" href="https://blog-static.cnblogs.com/files/monster-jian/flat-ui.min.css"/>
</body>
复制代码

4.鼠标点击爱心特效

4.1效果图如下：

 4.2将此代码贴入——页脚 HTML 代码

复制代码
<!--点击爱心特效-->
<script type="text/javascript">
//需要jquery插件
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤不做咸鱼！❤","❤拒绝懒惰！❤","❤想做吃货❤","❤向大佬学习❤","❤扶我起来~❤","❤come on❤","❤一直在路上~❤","❤累了~❤","❤再趴一会❤","❤66666❤","❤高兴的飞起*****❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
复制代码

5.鼠标点击火花特效

5.1效果图如下：

 5.2将此代码贴入——页脚 HTML 代码（接着之前的粘贴就行）

<!--点击火花特效-->
<script src="https://files.cnblogs.com/files/monster-jian/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

6.鼠标样式动画

6.1效果如下

6.2将此代码贴入——页面定制 CSS 代码 中

复制代码
/*鼠标样式动画*/
body{
    background-repeat: repeat;
    background-attachment: fixed;
    background-size:cover;
     cursor: url(https://files.cnblogs.com/files/monster-jian/cursor.ico),auto;
}
复制代码

7.鼠标样式动画

7.1效果如下，在页面左下角有人物

7.2将此代码贴入——页脚 HTML 代码中

复制代码

<!--右下角人物 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<!--小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json-->
<!--萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json-->
<!--小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json-->
<!--小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json-->
<!--初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json-->
<!-- 上边的不同链接显示的是不同的小人，这个可以根据需要来选择 下边的初始化部分，可以修改宽高来修改小人的大小，或者是鼠标移动到小人上的透明度，也可以修改小人在页面出现的位置。 -->
<script>
/*https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json*/
L2Dwidget.init({ "model": { jsonPath:
"https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
"scale": 1 }, "display": { "position": "left", "width": 66, "height": 88,
"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
"react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });
</script>

复制代码

7.3根据自己的喜好，修改展示内容

8.快速推荐

效果图如下：

 代码：

复制代码
/*快速推荐*/
#div_digg {
  position: fixed;
  bottom: 10px;
  right: 15px;
  border: 2px solid #ECD7B1;
  padding: 10px;
  width: 140px;
  background-color: #fff;
  border-radius: 5px 5px 5px 5px !important;
  box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}
复制代码

9.完成样式展示

 

10.以上几种样式中的URL，src 有带js文件，都是自己的文件路径，都可复制链接另寻为自己的js文件或其他格式文件，上传到自己的文件中，如图所示：

 

 

个人博客地址：https://www.cnblogs.com/liyhbk/

posted @ 2021-11-19 17:23  常给自己加个油  阅读(559)  评论(1)    收藏  举报