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

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

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

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

2. CSS Submarine(CSS潛艇)

Submarine with CSS by Alberto Jerez (@ajerez).

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

3. ASCII AT-AT

AT-AT by Tim Pietrusky (@TimPietrusky).

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

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效果。這是一個(gè)用CSS實(shí)現(xiàn)的3D Tardis。

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

Dozing Bird by Peter Klein (@pmk).

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

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

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

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

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

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

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

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

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

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

10. Cascading Solar System(太陽系)

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

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

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

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

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

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

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

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

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

Day Night simulation by Szymon Stypa (@Catagen).

點(diǎn)擊按鈕查看日夜交替動(dòng)畫。

14. Animated Sprite with CSS

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

15. Dodecahedron(十二面體)

Dodecahedron by wontem (@wontem).

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

 

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