今天這篇文章為大家挑選了15個超炫的 CSS 動畫效果的例子，這些 Demo 可以說都是藝術(shù)品。CodePen 是一個在線的前端代碼編輯和展示網(wǎng)站，能夠編寫代碼并即時預覽效果。你在上面可以在線分享自己的 Web 作品，也可以欣賞到世界各地的優(yōu)秀開發(fā)者在網(wǎng)頁中實現(xiàn)的各種令人驚奇的效果。

　　CodePen 是一個在線的前端代碼編輯和展示網(wǎng)站，能夠編寫代碼并即時預覽效果。你在上面可以在線分享自己的 Web 作品，也可以欣賞到世界各地的優(yōu)秀開發(fā)者在網(wǎng)頁中實現(xiàn)的各種令人驚奇的效果。

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

9. 3D Synth

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

使用純 CSS 制作的 3D 電子琴效果，點擊鼠標可以旋轉(zhuǎn)。

10. Cascading Solar System

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

太陽系的模型，完成了旋轉(zhuǎn)速度、衛(wèi)星和每一個大的行星的細節(jié)。看起來就像現(xiàn)實世界的東西！

11. 3D Solar System

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

另一個太陽系的系統(tǒng)模型，不過這個是 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).

示范序列圖像（雪碧圖）可以用來創(chuàng)建定格動畫，配有正向和反向運動。

15. Dodecahedron

Dodecahedron by wontem (@wontem).

一個完全用 CSS 創(chuàng)建的微妙的，美麗的十二面體動畫。

頁面加載太卡了，上篇請查看這里《15個來自 CodePen 的酷炫 CSS 動畫效果【下篇】》

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

 

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

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計資源