用CSS3製作50個超棒動畫效果教程

来源:http://www.cnblogs.com/androidshouce/archive/2016/07/14/5669056.html
-Advertisement-
Play Games

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時鐘效果。
表-jQuery-css3

2.模擬時鐘

  模擬時鐘基於過渡webkit和CSS3變形,javascript用於將其按當前時間轉動。
時鐘效果-css3

3.可使用箭頭鍵旋轉的3D立方體

  你可以使用上、下、左、右方向鍵控制這個3D立方體,它是基於webkit-perspective, -webkit-transform 和 -webkit-transition 創建。
css3-3D立方體

4.多種3D立方體(淡入淡出)

  多種3D立方體使用CSS3和它的屬性‘transform’ 和 ‘transition’ ,我個人覺得效果很震撼,你能看到寫在3D立方體上的透視感極強的文字。
多種3D立方體(淡入淡出)

5.CSS3手風琴效果

  使用CSS3實現的手風琴菜單效果,基於webkit瀏覽器專有屬性。
CSS3手風琴效果

6.自動滾動視差效果

  自動滾動視差效果使用WebKit的 CSS transition 屬性。該效果無需JavaScript。
自動滾動視差效果

7.Isocube

  Isocube有些類似於3D立方體,但也有不同之處,它可以讓他片貼在立方體面。
CSS3實例

8.CSS3圖片集

9.CSS3 Matrix(黑客帝國效果)

  黑客帝國是最棒的科幻小說改編電影之一,現在使用純CSS就能實現電影中的矩陣效果。
CSS3 Matrix(黑客帝國效果)

10.7種CSS3結合javascript技術的特效

  7種CSS3結合javascript技術的特效實例. 所包含的效果有淡入淡出, 震動, 輕移, 擴大, 跳動, 旋轉 和 手風琴效果。
7種CSS3結合javascript技術的特效

11.各種滑鼠懸停圖片特效

  六個由CSS3替代JavaScript而實現的滑鼠懸停圖片效果,CSS3實現這種懸停效果依然很炫!
各種滑鼠懸停圖片特效

12.旋轉的可口可樂易拉罐(使用滾動條控制)

CSS3實例

13.3D 《宮女》

CSS3實例

14.寶利來畫廊

  寶利來畫廊是由CSS3技術實現的將一些照片堆在一起,有趣的是滑鼠懸停照片是,照片會旋轉並緩慢放大~
CSS3教程

15.太空

CSS3實例

16.Mac Dock

  CSS3模擬的mac操作系統菜單…
CSS3實例

17.Drop-In Modals

CSS3實例

18.滑動的唱片

  該效果使用了CSS3過渡和些許HTML,在它上面放一個唱片專輯會看上去更生動。
CSS3實例

19.CSS3 Zooming Polaroids

  該效果會將一個照片列表按順序排列,並把它們按不同的角度旋轉,使用了CSS2和CSS3技術,無JavaScript。它從圖片的alt屬性中讀取出照片描述並放到了照片的下方。
CSS3 Zooming Polaroids

20.CSS3 火箭動畫

CSS3 火箭動畫

21.Poster Circle

CSS3實例

22.變形的立方體

CSS3實例

23.動畫版寶麗來畫廊

CSS3實例

24.聚光燈下的投影效果

CSS3實例

25.色彩鮮艷的時鐘

CSS3實例

26.Lightbox Gallery

CSS3實例

27.彈性縮略圖菜單

彈性縮略圖菜單

28.Coverflow

CSS3實例

29.jQuery DJ Hero

jQuery DJ Hero

30.Dynamic Stacking Cards

CSS3實例

31.另一個CSS3圖片畫廊效果

32.雪堆(使用方向鍵控制)

CSS3實例

33.CSS3動畫版價格欄

CSS3動畫版價格欄

34.平滑jQuery+CSS3菜單

平滑jQuery+CSS3菜單

35.CSS標簽(無JavaScript)

CSS標簽(無JavaScript)

36.CSS標簽菜單(無JavaScript)

CSS標簽菜單(無JavaScript)

37.SVG+CSS3魚眼菜單

VG+CSS3魚眼菜單

38.CSS3落葉效果

CSS3落葉效果

39.CSS3旋轉圖集效果

CSS3旋轉圖集效果

40.CSS3下拉菜單

CSS3下拉菜單

41.星球大戰風格爬行文字(純HTML+CSS)

星球大戰風格爬行文字(純HTML+CSS)

42.CSS3即時貼

CSS3即時貼

43.css3雪花

css3雪花

44.又一個魚眼效果

CSS3實例

45.CSS3逐幀動畫

  第一個CSS3逐幀動畫實例需要你持續使用滑鼠點擊圖片,當播放到最後一幀時它會自動播放第一幀,如此迴圈,但第一個實例只能在FireFox和Opera下實現。第二個Css3逐幀動畫實例需要你使用滑鼠在圖片上移動,依舊是mousemove這個動作,只要滑鼠在移動圖片動畫就會持續播放,但動畫的播放速度是與你的滑鼠移動速度有關的,該實例支持Safari, Google Chrome, IE8, Firefox 和 Opera。
CSS3逐幀動畫

46.全地域裝甲載具

CSS3實例

47.又一個CSS3手風琴效果

又一個CSS3手風琴效果

48.無Flash版動態展示

CSS3實例

49.平滑菜單欄

平滑菜單欄

50.loading旋轉效果

loading旋轉效果


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、要點: 1.頁面載入時,圖片重合,疊在一起[絕對定位]; 2.第一張顯示,其它隱藏; 3.設置下標,給下標設置顏色讓它隨圖片移動; 4.滑鼠移動到圖片上去,顯示左右移動圖標,滑鼠移走,繼續輪播; 二、實現代碼: html代碼: css代碼: js代碼: ...
  • what's BFC? 第一次看到這個名詞,我是拒絕的,css什麼時候還有這個東西?於是迫不及待的google了一下,才發現原來它無時無刻不在我們的css當中,只不過它並不是一個屬性,不需要我們平常使用手寫罷了。但是它的重要性確是杠杠的,可以這麼說,沒有它就就沒有什麼css佈局。 BFC,全稱 Bl ...
  • 《掃雷》是一款大眾類的益智小游戲,於1992年發行。游戲目標是在最短的時間內根據點擊格子出現的數字找出所有非雷格子,同時避免踩雷。線上試玩 http://hovertree.com/texiao/game/7/滑鼠左鍵標記非雷格子,右鍵標記地雷。如果左鍵點到地雷游戲失敗。 這是何問起掃雷成功的一個例 ...
  • 在實際的項目里,ajax的應用頻率很高,所以儘管jquery或者其他的一些類似的js庫做了非常不錯的封裝,仍然有進一步封裝簡化的空間和必要 舉一個例子,很久很久以前,我的ajax是這麼寫的: 乍一看挺好沒啥問題,但是其實success回調里的邏輯可能很複雜,甚至可能會出現ajax回調里再放一個aja ...
  • [1]條件 [2]逗號 [3]賦值 [4]() [5]void ...
  • cubic-bezier即為貝茲曲線中的繪製方法。圖上有四點,P0-3,其中P0、P3是預設的點,對應了[0,0], [1,1]。而剩下的P1、P2兩點則是我們通過cubic-bezier()自定義的。cubic-bezier(x1, y1, x2, y2) 為自定義,x1,x2,y1,y2的值範圍 ...
  • 希望這篇博客可以對你有所幫助,如果有什麼技術上的問題,希望我們可以做進一步的交流,如果你覺得我哪裡闡述的不正確或者你有更好的更透徹的理解,也可以聯繫我,我在這裡隨時等著你。 對於css/html是每個前端必經之路,之前我們可以只是簡單用css去做一些靜態的界面佈局,需要動畫效果還是需要js的幫助才可 ...
  • ClockPicker.js是一款時鐘插件,其實還可以改進,裡面的分可以改成短橫線。 線上實例 實例預覽 jQuery ClockPicker 圓形時鐘 使用方法 複製 參數詳解 ClockPicker調用方法 下載 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...