用CSS3制作50个超棒动画效果教程
CSS3為我們帶來了令人驚嘆的新特性，而最有趣的就是CSS動畫。向大家推薦這50個CSS動畫集合可以讓你通過使用JavaScript函數來讓動畫更生動。為了能夠預覽到這些驚人的CSS3技術帶來的動畫特效，請大家使用如Safari和Chrome這類基于WebKit內核的瀏覽器。(IE瀏覽器謝絕觀賞~)
1.CSS3實現鐘表效果(基于jQuery)
使用CSS3的基本變形特性:rotate，并結合了jQuery這類javaScript框架制作的CSS3時鐘效果。
2.模擬時鐘
模擬時鐘基于過渡webkit和CSS3變形，javascript用于將其按當前時間轉動。
3.可使用箭頭鍵旋轉的3D立方體
你可以使用上、下、左、右方向鍵控制這個3D立方體，它是基于webkit-perspective, -webkit-transform 和 -webkit-transition 創建。
4.多種3D立方體(淡入淡出)
多種3D立方體使用CSS3和它的屬性‘transform’ 和 ‘transition’ ，我個人覺得效果很震撼，你能看到寫在3D立方體上的透視感極強的文字。
5.CSS3手風琴效果
使用CSS3實現的手風琴菜單效果，基于webkit瀏覽器專有屬性。
6.自動滾動視差效果
自動滾動視差效果使用WebKit的 CSS transition 屬性。該效果無需JavaScript。
7.Isocube
Isocube有些類似于3D立方體，但也有不同之處，它可以讓他片貼在立方體面。
8.CSS3圖片集
9.CSS3 Matrix(黑客帝國效果)
黑客帝國是最棒的科幻小說改編電影之一，現在使用純CSS就能實現電影中的矩陣效果。
10.7種CSS3結合javascript技術的特效
7種CSS3結合javascript技術的特效實例. 所包含的效果有淡入淡出, 震動, 輕移, 擴大, 跳動, 旋轉 和 手風琴效果。
11.各種鼠標懸停圖片特效
六個由CSS3替代JavaScript而實現的鼠標懸停圖片效果，CSS3實現這種懸停效果依然很炫！
12.旋轉的可口可樂易拉罐(使用滾動條控制)
13.3D 《宮女》
14.寶利來畫廊
寶利來畫廊是由CSS3技術實現的將一些照片堆在一起，有趣的是鼠標懸停照片是，照片會旋轉并緩慢放大~
15.太空
16.Mac Dock
CSS3模擬的mac操作系統菜單…
17.Drop-In Modals
18.滑動的唱片
該效果使用了CSS3過渡和些許HTML，在它上面放一個唱片專輯會看上去更生動。
19.CSS3 Zooming Polaroids
該效果會將一個照片列表按順序排列，并把它們按不同的角度旋轉，使用了CSS2和CSS3技術，無JavaScript。它從圖片的alt屬性中讀取出照片描述并放到了照片的下方。
20.CSS3 火箭動畫
21.Poster Circle
22.變形的立方體
23.動畫版寶麗來畫廊
24.聚光燈下的投影效果
25.色彩鮮艷的時鐘
26.Lightbox Gallery
27.彈性縮略圖菜單
28.Coverflow
29.jQuery DJ Hero
30.Dynamic Stacking Cards
31.另一個CSS3圖片畫廊效果
32.雪堆(使用方向鍵控制)
33.CSS3動畫版價格欄
34.平滑jQuery CSS3菜單
35.CSS標簽(無JavaScript)
36.CSS標簽菜單(無JavaScript)
37.SVG CSS3魚眼菜單
38.CSS3落葉效果
39.CSS3旋轉圖集效果
40.CSS3下拉菜單
41.星球大戰風格爬行文字(純HTML CSS)
42.CSS3即時貼
43.css3雪花
44.又一個魚眼效果
45.CSS3逐幀動畫
第一個CSS3逐幀動畫實例需要你持續使用鼠標點擊圖片，當播放到最后一幀時它會自動播放第一幀，如此循環，但第一個實例只能在FireFox和Opera下實現。第二個Css3逐幀動畫實例需要你使用鼠標在圖片上移動，依舊是mousemove這個動作，只要鼠標在移動圖片動畫就會持續播放，但動畫的播放速度是與你的鼠標移動速度有關的，該實例支持Safari, Google Chrome, IE8, Firefox 和 Opera。
46.全地域裝甲載具
47.又一個CSS3手風琴效果
48.無Flash版動態展示
49.平滑菜單欄
50.loading旋轉效果
總結
以上是生活随笔為你收集整理的用CSS3制作50个超棒动画效果教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 欧盟无线产品RED认证
- 下一篇： Wireshark-ICMP数据报分析