[css]贊！15個來自 CodePen 的酷炫 CSS 動畫效果
類型：
css
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 各種屬性實作的潛水艇動畫，是不是很逼真啊？?
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 製作的?《星球大戰》電影片頭標題效果。
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 創建的微妙的，美麗的十二面體動畫。
最新最 hit 的藝術設計圖片，盡在PicGap
![在新視窗檢視]( "Flash2u")
原文站台: 夢想天空
歡迎任何形式的轉載，但請務必註明出處。
![在新視窗檢視]( "Flash2u")
分享到Facebook
類型：
css
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 各種屬性實作的潛水艇動畫，是不是很逼真啊？?
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 製作的?《星球大戰》電影片頭標題效果。
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 創建的微妙的，美麗的十二面體動畫。
最新最 hit 的藝術設計圖片，盡在PicGap
原文站台: 夢想天空
歡迎任何形式的轉載，但請務必註明出處。
分享到Facebook