js 代码

$(window).scroll(function(){
 var s=$(window).scrollTop();//滚动条和顶部的距离，默认单位:px. 
//所以当$(window).scrollTop()的值等于0时，就表示滚动条在最顶部。
 var a=$(document).height();//页面文档的总高度
 var b=$(window).height();//窗口能显示的最大高度
//页面文档高度-窗口的最大高度=s的最大值。即滚动条需要滚动的最大距离
 var result=parseInt(s/(a-b)*100);
//所以s/(a-b)就是滚动条相对于窗口的百分比。 
 $("#bar").css("width",result+"%");
 if(result>=0&&result<=19)
 $("#bar").css("background","#cccccc");
 if(result>=20&&result<=39)
 $("#bar").css("background","#50bcb6");
 if(result>=40&&result<=59)
 $("#bar").css("background","#85c440");
 if(result>=60&&result<=79)
 $("#bar").css("background","#f2b63c");
 if(result>=80&&result<=99)
 $("#bar").css("background","#FF0000");
 if(result==100)
 $("#bar").css("background","#5aaadb");
});

阅读全文

下载 atom
如何安装插件：
下载插件后解压到 C:\Users\Yourname\.atom\packages 中
打开 atom
可能会提示缺少 Uncaught Error:Cannot find module 'module name'
command + R -> cmd
npm install module name
若提示 'npm' 不是内部或外部命令
需下载 node.js
每执行一条 npm 命令，重启一次 atom ，直到不再提示报错，则可正常使用已安装的插件。
参考

阅读全文

html 代码

<div class="preloader">
    <div class="zgroup">
        <div class="bigSqr">
            <div class="square first"></div>
            <div class="square second"></div>
            <div class="square third"></div>
            <div class="square fourth"></div>
        </div>
    </div>
    <p>...</p>
</div>

.preloader{margin:86px 0;text-align:center;}
.preloader p{font-size:1.2em;margin-top:20px;text-align:center;}
.zgroup{line-height:16px;}
.bigSqr,.zgroup{position:relative;display:inline-block;}
.bigSqr{width:40px;height:40px;overflow:hidden;-webkit-transform-origin:bottom left;transform-origin:bottom left;-webkit-animation:bigSqrShrink 1s linear infinite;animation:bigSqrShrink 1s linear infinite;}
.square{position:absolute;width:20px;height:20px;background:#cf6;}
.first{left:0;top:20px;}
.second{left:20px;top:20px;-webkit-animation:drop2 1s linear infinite;animation:drop2 1s linear infinite;}
.third{left:0;top:0;-webkit-animation:drop3 1s linear infinite;animation:drop3 1s linear infinite;}
.fourth{left:20px;top:0;-webkit-animation:drop4 1s linear infinite;animation:drop4 1s linear infinite;}
@-webkit-keyframes bigSqrShrink{0%{-webkit-transform:scale(1);transform:scale(1);}90%{-webkit-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(.5);transform:scale(.5);}}
@keyframes bigSqrShrink{0%{-webkit-transform:scale(1);transform:scale(1);}90%{-webkit-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(.5);transform:scale(.5);}}
@-webkit-keyframes drop2{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}25%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@keyframes drop2{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}25%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@-webkit-keyframes drop3{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}50%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@keyframes drop3{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}50%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@-webkit-keyframes drop4{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}75%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@keyframes drop4{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}75%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}

效果如下：
摸一下我 -> (●'◡'●)ﾉ♥

将 shake.css 上传至相关目录中。
将以下代码插入到相关的 head.php 文件中：

<link rel="stylesheet" href="<?= STATIC_PATH ?>css/shake.css">

css 代码

#comments .comment-author .avatar{
                                    transition:1s;/*核心代码*/
                                    float:left;
                                    margin:.0625rem .625rem 0 0;
                                    border-radius:3.125rem;
                                    width:3.125rem;
                                    height:3.125rem
                                }
#comments .comment-author .avatar:hover{
                                    transform:rotate(360deg);/*核心代码*/
                                    -webkit-transform:rotate(360deg);/*核心代码*/
                                    }