15個來自CodePen的酷炫CSS動畫效果【下篇】

　　CodePen 是一個線上的前端程式碼編輯和展示網站，能夠編寫程式碼並即時預覽效果。你在上面可以線上分享自己的 Web 作品，也可以欣賞到世界各地的優秀開發者在網頁中實現的各種令人驚奇的效果。

　　今天這篇文章為大家挑選了15個超炫的 CSS 動畫效果的例子，這些 Demo 可以說都是藝術品。（為保證最佳的效果，請在 Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽）

9. 3D Synth

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

使用純 CSS 製作的 3D 電子琴效果，點選滑鼠可以旋轉。

10. Cascading Solar System

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

太陽系的模型，完成了旋轉速度、衛星和每一個大的行星的細節。看起來就像現實世界的東西！

11. 3D Solar System

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

另一個太陽系的系統模型，不過這個是 3D 的，有美麗的陰影效果。

12. Flat Design Camera

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

使用CSS動畫模擬在相機上按下快門，拍攝照片的動畫效果。

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 建立的微妙的，美麗的十二面體動畫。

頁面載入太卡了，上篇請檢視這裡《15個來自 CodePen 的酷炫 CSS 動畫效果【下篇】》

=======================================================

 

本文連結：贊！15個來自 CodePen 酷炫 CSS 動畫效果 

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源