CSS3為我們帶來了令人驚嘆的新特性,而最有趣的就是CSS動畫。向大家推薦這50個CSS動畫集合可以讓你通過使用JavaScript函數來讓動畫更生動。為了能夠預覽到這些驚人的CSS3技術帶來的動畫特效,請大家使用如Safari和Chrome這類基於WebKit內核的瀏覽器。(IE瀏覽器謝絕觀賞~) ...
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.平滑菜單欄