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

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

類型：
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 動畫效果【下篇】》

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

最新最 hit 的藝術設計圖片，盡在PicGap









原文站台: 夢想天空

歡迎任何形式的轉載，但請務必註明出處。













分享到Facebook