CSS - 缓冲动画样式

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>

css 代码
.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);}}
demo

参考

Typecho 配置七牛云加速

之前使用 Wordpress 搭建的站点 小尾巴原站 ,通过七牛云插件,实现了网站的加速功能,虽然加载还是非常地慢。
本站使用 Typecho 配置七牛云加速解决办法。
这位博主修改并优化了七牛云插件,配置也非常简单
传送门

wdcp php 版本升级至 5.6

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

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

  翻  牌  子

PHP-静态变量

变量范围的一个重要特性是静态变量 static variable
静态变量仅在局部函数域中存在,但当程序执行离开此作用域时,其值并不丢失。
静态变量只存在于函数作用域内,也就是说,静态变量只存活在栈中。
一般的函数内变量在函数结束后会释放,比如局部变量,但是静态变量却不会。
就是说,下次再调用这个函数的时候,该变量的值会保留下来。

  翻  牌  子

PHP-全局变量

全局变量使用 global 关键字

<?php
$a = 1;
$b = 2;
function sum(){
global $a;
global $b;
$b = $a + $b;
echo $b;
}
sum();
/*function sums($a,$b){
$b = $a + $b;
echo $b;
}
sums(2,4);*/
?>