使用了keyframes來使動畫反覆迴圈，在webkit核心瀏覽器下表現的很好，目前是webkit only，火狐也請繞道吧。
下面放主要**和demo，一demo勝千言啊。
主要樣式：
.x-loading-spinner
.x-loading-spinner
>
span
,.x-loading-spinner
>
span
:before
,.x-loading-spinner
>
span
:after
.x-loading-spinner
>
span
.x-loading-top
.x-loading-spinner
>
span
.x-loading-top
::after
.x-loading-spinner
>
span
.x-loading-left
::before
.x-loading-spinner
>
span
.x-loading-left
.x-loading-spinner
>
span
.x-loading-left
::after
.x-loading-spinner
>
span
.x-loading-bottom
::before
.x-loading-spinner
>
span
.x-loading-bottom
.x-loading-spinner
>
span
.x-loading-bottom
::after
.x-loading-spinner
>
span
.x-loading-right
::before
.x-loading-spinner
>
span
.x-loading-right
.x-loading-spinner
>
span
.x-loading-right
::after
.x-loading-spinner
>
span
.x-loading-top
::before
.x-loading-spinner
>
span
.x-loading-spinner
>
span
.x-loading-top
.x-loading-spinner
>
span
.x-loading-right
.x-loading-spinner
>
span
.x-loading-bottom
.x-loading-spinner
>
span
.x-loading-left
.x-loading-spinner
>
span
::before
.x-loading-spinner
>
span
::after
.x-loading-spinner
@-webkit-keyframes
x-loading-spinner-rotate
8.32%8
.33%
16.65%16
.66%
24.99%25
%33.32%
33.33%41
.65%
41.66%49
.99%50%
58.32%58
.33%
66.65%66
.66%
74.99%75
%83.32%
83.33%91
.65%
91.66
%100%}
html結構
class=
"x-mask-loading"
style=
"text-align:center;margin:1em"
>
class=
"x-loading-spinner"
style=
"margin:0 auto 7px;"
>
class=
"x-loading-top"
>
class=
"x-loading-right"
>
class=
"x-loading-bottom"
>
class=
"x-loading-left"
>
class=
"x-loading-msg"
>載入中…
使用css3製作盒子
直接切圖製作這樣的盒子的話可能不用花很長的時間，但是使用css3的話卻是可以大大加快頁面載入速度的 所以嘗試了一下，當然並不是出於載入速度的考慮，純粹的因為shoujian tothtml registergiftbox registergift registergift registergifti...
使用CSS3製作倒影
webkit box reflect仍然是乙個非標準屬性,目前僅在chrome safari和opera瀏覽器下支援,可惜的是在firefox下並不支援這個屬性，不過值得慶幸的是，在firefox下可以通過element svg的mask來模擬實現.webkit box reflect none k...
css3特效 loading載入中
以前loading都是一張，顯示或隱藏。現在如果考慮移動端弱網到連也載入不成功，此時css3的loading就非常有用了，而且模擬了效果，節省空間。基本原理 1，外部乙個span，固定寬高 正方形 行內塊元素，相對定位，垂直對齊。2，內部12個span，相對寬高 相對外部 行內塊元素，絕對定位 to...