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

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

1.?JavaScript Mickey Watch

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

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

src="https://codepen.io/jaysalvat/embed/ogQbKB/?height=600&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="600">

2.?CSS Submarine

Submarine with CSS?by Alberto Jerez (@ajerez).

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

src="https://codepen.io/ajerez/embed/EaEEOW/?height=460&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="460">

3.?ASCII AT-AT

AT-AT?by Tim Pietrusky (@TimPietrusky).

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

src="https://codepen.io/TimPietrusky/embed/uLbfr/?height=400&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="400">

4.?SVG/CSS Loader

Loader SVG/CSS?by Bidji (@Bidji).

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

src="https://codepen.io/Bidji/embed/dPEzwq/?height=400&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="400">

5.?3D CSS Tardis

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

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

src="https://codepen.io/Gerwinnz/embed/hjxzl/?height=510&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="510">

6.?Dozing Bird

Dozing Bird?by Peter Klein (@pmk).

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

src="https://codepen.io/pmk/embed/ByXOOq/?height=600&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="600">

7.?Pure CSS border animation

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

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

src="https://codepen.io/Rplus/embed/lEDBj/?height=339&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="339">

8.?Star Wars: The Force Awakens

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

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

src="https://codepen.io/donovanh/embed/pJzwEw/?height=498&theme-id=12451&default-tab=result" frameborder="no" scrolling="no" width="600" height="498">

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

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

您可能感興趣的相關文章

• 網站開發中很有用的 jQuery 效果【附源碼】
• 分享35個讓人驚訝的 CSS3 動畫效果演示
• 十分驚艷的8個 HTML5 & JavaScript 特效
• Web 開發中很實用的10個效果【源碼下載】
• 12款經典的白富美型 jQuery 圖片輪播插件

?

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

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

本文出處【http://www.cnblogs.com/lhb25/】

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的赞！15个来自 CodePen 的酷炫 CSS 动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。