翻  牌  子

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);}}

<script src="./js/activate-power-mode.js?v=<?= Mirages::$version?>"></script>
<script>
    POWERMODE.colorful = true; // ture 为启用礼花特效
    POWERMODE.shake = false; // false 为禁用震动特效
    document.body.addEventListener('input', POWERMODE);
</script>

activate-power-mode.js
参考

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

将 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);/*核心代码*/
                                    }

在部署本网站时，发现网站中各种乱码，原因是需要 php5.6+ 的版本，所以进行了 php 版本的升级。
shell 代码

wget -c http://batpanel.oss-cn-beijing.aliyuncs.com/php_up5.6.sh
sh php_up5.6.sh

js 代码

  function GetRTime1(){
    var EndTime1= new Date('2018/03/28 00:00:00');
    var NowTime1 = new Date();
    var t1 =EndTime1.getTime() - NowTime1.getTime();
    var d1=0;
    var h1=0;
    var m1=0;
    var s1=0;
    if(t1>=0){
      d1=Math.floor(t1/1000/60/60/24);
      h1=Math.floor(t1/1000/60/60%24);
      m1=Math.floor(t1/1000/60%60);
      s1=Math.floor(t1/1000%60);
    }
    document.getElementById("t_d1").innerHTML = d1 + " 天";
    document.getElementById("t_h1").innerHTML = h1 + " 时";
    document.getElementById("t_m1").innerHTML = m1 + " 分";
    document.getElementById("t_s1").innerHTML = s1 + " 秒";
  }
  setInterval(GetRTime1,0);

html 代码

<code id="t_d1">00</code>
<code id="t_h1">00</code>
<code id="t_m1">00</code>
<code id="t_s1">00</code>

下载

下载