博客园页面背景动画设置

我也是在浏览时看见了很多人的动画很炫酷，才去各处搜索
放上各位大神连接：
https://www.cnblogs.com/yaoliuyang/p/12742359.html
https://www.cnblogs.com/wkfvawl/p/9414180.html
https://www.cnblogs.com/lyoko1996/p/11000614.html
设置动画首先要申请权限

因为我申请过了，所以显示支持JS代码

一、线条动画

线条动画，效果如下：（鼠标停置，会自动吸附线条）

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

可以打开复制下来用txt转成js文件，或者直接用我的src路径

js文件连接，复制链接，拷贝js：https://files.cnblogs.com/files/monster-jian/canvas-nest.js

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

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

<!-- 线条背景动画 -->
<script type="text/javascript"  color="0,0,0" opacity='1' zIndex="-2" count="100000" src="https://blog-static.cnblogs.com/files/monster-jian/canvas-nest.js"></script>

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

二、通知栏live2D动画

效果如下

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

<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>
</body>
<ml>
<link rel="stylesheet" type="texts" href="https://blog-static.cnblogs.com/files/monster-jian/flat-ui.min.css"/>

三、鼠标点击动画

效果如下

（1）字

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

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        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();
        });
    });
});

<br>

#### （2）火花

<br>
- 将此代码贴入——页脚 HTML 代码
~~~JavaScript
</script>
<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>

四、鼠标样式动画

效果如下
将此代码贴入——页面定制 CSS 代码中