博客园美化

Posted 2021-03-24 funval

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了博客园美化相关的知识，希望对你有一定的参考价值。

一、添加看板娘

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

可以用我的文件地址，或者打开链接自己复制一份放到自己的文件里。

waifu.css文件是把看板娘放到左边，如果想放到右边把文件链接改为waifu1.css就可以了。

二、鼠标点击特效

<script src="https://blog-static.cnblogs.com/files/hean/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

同上，可以把js文件复制一份放到自己的文件里，当然用我的地址也是可以的。

三、网页title离开/回来变换

<script>
var normal_title = document.title;
document.addEventListener(‘visibilitychange‘,function(){
    if( document.visibilityState == ‘hidden‘ ){
        document.title = ‘等等，你别走啊 ! ?_? ‘;
        setTimeout(function(){
            document.title = ‘( ?? .? ?? )要走的人终究是留不住的~~‘;
        }, 1200)
        setTimeout(function(){
            document.title = normal_title;
        }, 4000)
    }
    else if(document.visibilityState == ‘visible‘ ){
        document.title = "(?‘?`?)??欢迎回来 ! ^_^o";
        setTimeout(function(){
            document.title = normal_title;
        }, 4000)
    }
    else{document.title = normal_title;
}
});
</script>

效果：我的标题栏，切换页面看一下效果。

哪有不懂得地方可以联系我，我不会经常看博客，但是看到会及时回复的

以上是关于博客园美化的主要内容，如果未能解决你的问题，请参考以下文章

博客园个人界面美化（初入博客园）

[博客美化] 博客园SyntaxHighlighter代码高亮