隨著手機效能越來越好css3動畫在移動端中運用也越來越多，各種技術大牛寫出來各種炫酷的效果；
本著不想被行業所淘汰的心態，最近也在看關於css3動畫方面的東西；
然後也想去寫點東西，下面貼**吧!
html**如下：
*
.color-box
.color-box span
.color-box span:before
.red,.color-box .red:before
.blue,.color-box .blue:before
.yellow,.color-box .yellow:before
.color-box .red:before
.color-box .blue:before
.color-box .yellow:before
@-webkit-keyframes slatey1
14.3%
28.6%
42.8%
57%
85.7%
100%
}@keyframes slatey1
14.3%
28.6%
42.8%
57%
85.7%
100%
}@-webkit-keyframes slatey2
14.3%
28.6%
42.8%
57%
85.7%
100%
}@keyframes slatey2
14.3%
28.6%
42.8%
57%
85.7%
100%
}@-webkit-keyframes slatey3
14.3%
28.6%
42.8%
57%
85.7%
100%
}@keyframes slatey3
14.3%
28.6%
42.8%
57%
85.7%
100%
}
至於這效果能用在**，我自己也不知道，我也就是瞎寫寫。
CSS3重複漸變（線性和徑向漸變）
background image repeating linear gradient to top,f9f9f9,f9f9f9 29px,ccc 30px 重複線性漸變 background image repeating radial gradient red,green 40px,orange ...
使用純CSS3實現乙個日食動畫
日食現象是月亮擋在了地球和太陽之間，也就是月亮遮擋住了太陽。所以要構造日食，我們須要2個物件 乙個代表月亮，乙個代表太陽。我們把整個日食過程分解為3個階段 1.緩慢移入 2.短暫停留 3.緩慢移出。在此期間。會產生3個彼此關聯的動畫。首先是月亮的位置移動，我們通過改變月亮的x座標 left或righ...
css3做乙個loading動畫效果（詳細思路）
純css3的動畫做效果 小人來回移動，碰到小球時，小球消失。首先，html搭建結構 css布局 要點1 這個移動的小人是用兩個半圓來實現 move top和move down這兩個子。看似乙個圓構成，但要做出嘴巴張開與閉合這個效果，乙個圓是不能做出來的，採用兩個圓定位重疊，用css的clip屬性將乙...