博客园美化修饰

2021-02-16 18:05:05 阅读：148 来源： 互联网

文中使用到的样式皆为本人在网络中收集整合而来，如有不妥请联系我进行更正

在修饰博客园时使用到的JS以及其他文件可以上传到博客园的文件管理中进行引用

指针样式修改

可以通过CSS修改博客园中的指针样式，效果如图所示：

可以直接将下面这段代码放到页面定制CSS代码处，也可以将文件下载上传至自己空间在进行引用：

body {
    cursor: url(https://blog-static.cnblogs.com/files/hanzhe/cursor.ico),auto;
}

背景线条

页面背景中一个个的小点点，靠近后就会产生线条，拥有鼠标吸附的效果：

在页脚HTML代码中添加如下JS即可实现效果

<!--
  color：线条颜色
  opacity：线条透明度，0为全透明，1为不透明
  count：颗粒总数量，建议100左右，多了页面会卡
  zindex：显示的层级
-->
<script src="https://blog-static.cnblogs.com/files/hanzhe/bg-line.js" color="139,139,139" opacity="1" count="80" zindex="-2"></script>

鼠标单击效果

单击烟花特效

效果如图所示：

页脚HTML代码中添加如下代码即可

<script src="https://blog-static.cnblogs.com/files/hanzhe/click-fireworks.js"></script>

单击文字悬浮

效果图如下所示：

页脚HTML代码中添加如下代码即可，这里建议直接将代码放进去方便随时修改文字，或者直接上传引用也可以：

<script>
    var a_idx = 0;
    jQuery(document).ready(function ($) {
        $("body").click(function (e) {
            // 这里就是页面中循环显示的文字了，自定义替换即可
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
            var $i = $("<span style='user-select: none; font-size: 15px'/>").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": "#ff6651"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
                1500,
                function () {
                    $i.remove();
                });
        });
    });
</script>

单击爱心效果