博客园美化
Posted 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>
效果:我的标题栏,切换页面看一下效果。
哪有不懂得地方可以联系我,我不会经常看博客,但是看到会及时回复的
以上是关于博客园美化的主要内容,如果未能解决你的问题,请参考以下文章