Codepen 正在迅速的成為我們展示網(wǎng)頁作品的好去處。這里列出了近期一些人用CSS3創(chuàng)建的動畫實例。

1.JavaScript Mickey Watch(JavaScript米老鼠時鐘)

Apple watch like Mickey watch by Jay Salvat (@jaysalvat).

這是一個結(jié)合CSS的transitions、SVG圖形和JavaScript來控制米老鼠手勢位置顯示時鐘的可愛的例子。

2. CSS Submarine(CSS潛艇)

Submarine with CSS by Alberto Jerez (@ajerez).

圓形孔狀容器的使用給這款CSS動畫潛艇增加了很多魅力。

3. ASCII AT-AT

AT-AT by Tim Pietrusky (@TimPietrusky).

受星球大戰(zhàn)啟發(fā)繪制的AT-AT人體載體，非常時髦的效果。

4. SVG/CSS Loader(SVG/CSS 加載效果)

Loader SVG/CSS by Bidji (@Bidji).

通過改變色彩給人以旋轉(zhuǎn)的印象。

5. 3D CSS Tardis

3D CSS Tardis by Gerwin van Royen (@Gerwinnz).

CSS可以創(chuàng)造出驚人的3D效果。這是一個用CSS實現(xiàn)的3D Tardis。

6. Dozing Bird(打瞌睡的小鳥)

Dozing Bird by Peter Klein (@pmk).

簡單的藝術(shù)風(fēng)格和適量的動畫，給這個小鳥以犯困的幻覺。

7. Pure CSS border animation(純CSS邊框動畫)

Pure CSS border animation without SVG by Rplus (@rplus).

簡單有效的用CSS邊框?qū)崿F(xiàn)的一個加載效果。

8.Star Wars: The Force Awakens(星球大戰(zhàn)：原力覺醒)

Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh).

使用HTML、CSS和一些JavaScript實現(xiàn)的即將到來的星球大戰(zhàn)的標題。

9. 3D Synth(3D合成器)

Pure CSS 3D Synthesizer (mousedown for rotation) by Nikolay Talanov (@suez).

試下用鼠標點擊這個用CSS實現(xiàn)的電子琴，還可以旋轉(zhuǎn)。驚人的效果。

10. Cascading Solar System(太陽系)

Cascading Solar System! by Tady Walsh (@tadywankenobi).

完全按照大行星和衛(wèi)星的縮放比例、旋轉(zhuǎn)速度實現(xiàn)的太陽系。

11. 3D Solar System(3D太陽系)

Full CSS 3D Solar System by Wayne Dunkley (@waynedunkley).

另一個太陽系，不過使用的是3D效果。很好的使用了陰影效果。

12. Flat Design Camera(扁平設(shè)計的相機)

Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm).

按下快門查看使用CSS實現(xiàn)的動畫。

13. Day and Night Transition(日夜交替)

Day Night simulation by Szymon Stypa (@Catagen).

點擊按鈕查看日夜交替動畫。

14. Animated Sprite with CSS

Animate sprite with CSS by Avaz Bokiev (@samarkandiy).

15. Dodecahedron(十二面體)

Dodecahedron by wontem (@wontem).

一個微妙的美麗的完全用CSS實現(xiàn)的十二面體。

 

本文由 Specs 翻譯整理，發(fā)布在 WEB資源網(wǎng)，轉(zhuǎn)載請注明來源。