码迷,mamicode.com
首页 > 其他好文 > 详细

博客园美化

时间:2019-10-27 14:27:02      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:lin   cross   styles   http   sheet   boot   city   标题   地址   

一、添加看板娘

<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>

效果:我的标题栏,切换页面看一下效果。

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


 

博客园美化

标签:lin   cross   styles   http   sheet   boot   city   标题   地址   

原文地址:https://www.cnblogs.com/funval/p/11747140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!