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

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

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

1. JavaScript Mickey Watch

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

米老鼠是大家非常熟悉的迪斯尼動畫形象。這是一個可愛的效果，結合 CSS & SVG 圖形實現的米老鼠鐘表效果。

2. CSS Submarine

Submarine with CSS by Alberto Jerez (@ajerez).

這是一個綜合使用 CSS 各種屬性實現的潛水艇動畫，是不是很逼真?。?nbsp;

3. ASCII AT-AT

AT-AT by Tim Pietrusky (@TimPietrusky).

受《星球大戰》啟發，使用 CSS 編寫的人員運輸車效果，使用了多種文本顏色，一個時髦的效果。

4. SVG/CSS Loader

Loader SVG/CSS by Bidji (@Bidji).

這個 loading 效果通過使用變換的色彩來給人產生正在旋轉的印象。

5. 3D CSS Tardis

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

CSS 可以用來制作各種有趣的 3D 效果，這是一個 3D 的Tardis（英國科幻電視劇中的時間機器和宇宙飛船）。

6. Dozing Bird

Dozing Bird by Peter Klein (@pmk).

簡單的藝術風格，加上適量的動畫給這個正在打瞌睡的鳥一種生活的幻覺。

7. Pure CSS border animation

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

簡單而非常有效的使用 CSS 邊框創建的 loading-style 動畫。

8. Star Wars: The Force Awakens

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

使用 CSS, HTML 和 JavaScript 制作的 《星球大戰》電影片頭標題效果。

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

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

 

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

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

本文出處【http://www.rzrgm.cn/lhb25/】