Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

15個CodePen上啟發靈感的CSS動畫案例

by
Length:LongLanguages:

Chinese (Traditional) (中文(繁體)) translation by Stypstive (you can also view the original English article)

CodePen快速的成為了一個門庭若市的地方,供大家來展示我們的網頁創意。 這裡有一個列表,列出了一些最近人們創建的很不錯的CSS動畫!

1. JavaScript米奇手錶

蘋果手錶造型米奇手錶由Jay Salvat提供(@jaysalvat

這是一個非常可愛的混合CSS變換功能、SVG圖像以及JavaScript來將一雙可愛的手放置到米老鼠手錶盤的案例。

2. CSS 潛水艇

潛水艇和CSS 由Alberto Jerez提供(@ajerez

華麗的使用圓形的孔洞容器給了這個CSS動畫效果的潛水艇更多的魅力。

3. ASCII AT-AT機器人

AT-AT 由Tim Pietrusky提供(@TimPietrusky

以星戰為靈感的AT-AT運輸人員,使用文字來繪製的圖形並帶有顏色循環變換的CSS。 時髦的特效。

4. SVG/CSS加載標誌

SVG/CSS加載標誌 由Bidji提供(@Bidji

這是一個加載器,使用了顏色變化來使視覺上覺得是在旋轉。

5.3D CSS 時間機器Tardis

3D CSS 時間機器Tardis 由Gerwin van Royen提供(@Gerwinnz

CSS可以被用作創建一些令人驚奇的3D效果。 這裡就是一個3D的時間機器tardis:

6. 犯困的小鳥

犯困的小鳥 由Peter Klein提供(@pmk

簡單的藝術樣式,剛剛好程度的動畫效果,這些都給了這個犯困的小鳥鮮活的生命。

7. 純CSS邊框動畫

純CSS非SVG邊框動畫效果 由Rplus提供(@rplus

簡單但又非常有效地使用CSS邊框(border)來創建一個讀取效果的動畫。

8. 星球大戰:原力覺醒

星球大戰:原力覺醒CSS 由Donovan Hutchinson提供(@donovanh

這個標題是從最新的新球大戰電影來的靈感,使用了CSS、HTML和一點點JavaScript創建的。

9. 3D合成器

純CSS3D合成器(鼠標按住可以旋轉)由Nikolay Talanov提供(@suez

試試按鍵以及旋轉這個3D的合成器,這是CSS創建的。 傑作!

10. 層疊式太陽系系統

層疊式太陽系系統!由Tady Walsh提供(@tadywankenobi

一個我們太陽系天體系統的模型,具有加快但成比例的旋轉速度、月亮以及大型天體的細節等等。 太陽甚至是由真實的照片截取的的圖片 !

11. 3D太陽系系統

全CSS 3D太陽系系統 由Wayne Dunkley提供(@waynedunkley

另一個太陽系系統示意圖,不過這次是全3D的。 漂亮的對於陰影的應用。

12. 扁平化設計相機

扁平化設計相機CSS動畫 由Damien Pereira Moberto提供(@damienpm

在這個扁平化設計的相機上按下快門,看看它使用CSS動畫創建的照片。

13. 白天和晚上的轉換

白天和夜晚的轉換模擬器 由Szymon Stypa提供(@Catagen

按下面的按鈕來看白天轉換到晚上的效果。

14. 動畫圖片和CSS

動畫效果圖片和CSS 由Avaz Bokiev提供(@samakandiy

這是一個範例顯示了序列圖片(動畫)可以被用來創建單格拍攝動畫,使用了前進和倒退的動作來完成。

15. 正十二面體

正十二面體 由wontem提供(@wontem

這是一個精細的、漂亮的正十二面體,這個動畫是完全由CSS創建的。

結論

不久之前,我們可能學了Flash或者JavaScript工具為了實現任何的瀏覽器動畫, 不過現代的瀏覽器已經有了更好的對於CSS的支持,以及硬件加速3D和動畫。

感謝類似於CodePen這樣的網站, 我們可以比以前更簡單的分享和學習代碼, 那麼最近你有什麼富有靈感的代碼樣本呢?

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.