动画效果

顶部加载条

加载条,我是用pace这个js库,在博客<head></head>标记中加入下述代码立即生效:

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

可将pace-theme-flash.css改成需要的样式

离线检测

网络检测插件offline-js,可以检测出你的博客是否离线(当断网的时候),在线的时候(或者博客更新内容)就会自动刷新加载/更新,和顶部加载条使用方法一样,插入就能用:

<script src="//cdn.bootcss.com/offline-js/0.7.14/offline.min.js"></script>
<link href="//cdn.bootcss.com/offline-js/0.7.14/themes/offline-language-english.css" rel="stylesheet">
<link href="//cdn.bootcss.com/offline-js/0.7.14/themes/offline-theme-chrome.css" rel="stylesheet">

可将offline-theme-chrome换成需要的样式。

效果图:离线检测

CSS小动画

我博客的一些动画效果,例如鼠标接触头像捏脸,菜单翻转这些(太花销了,等考试后再改改=.=。。),其实用到了animate.css这个库,官方演示:Animate.css

使用也很简单,首先在<head>里插入样式文件(我使用的是BootCDN

<link href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css" rel="stylesheet">

接着在要使用的元素上,先找到样式,
样式

然后在样式表中添加:

    &:hover {
        -webkit-animation: rubberBand 1s;
        animation: rubberBand 1s;
    };

&换成你的样式名称,rubberBand是动画效果,可参考Animate.css

雪花效果

雪花我是用这个JQuery-Snowfall库,这是项目地址:https://github.com/loktar00/JQuery-Snowfall

先引入js:

<script src="//cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>

最后在合适的地方调用即可:

<script>
    $(document).snowfall({deviceorientation : true, image: "/img/flake.png", minSize: 10, maxSize: 32, flakeCount: 60});
</script>

/img/flake.png换成你的雪花图片,剩下的参数很好理解,可以到项目主页看看。