搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 HTML/CSS 語法 用 SVG 和 CSS 動畫製作的訊息圖表
byadmin 發表於 2013-5-16 17:33:08 , 6761人已閱讀 , 0人回應
DEMO:http://srpro.org/htmldemo/svg/ (請使用新版ChromeFirefox開啟瀏覽效果,別用IE開啟,)  

SVG.jpg


範例下載: InteractiveSVG.zip (115.59 KB, 下載次數: 29)   


什麼SVG ?
SVG是Scapable Vector Graphics 一種向量圖像格式(縮放不失真),是W3C推薦的一種標準格式,符合XML節點的規則,用XML來描述二維圖像的語言。

這個範例今天筆者看到時,心中突然深深一股感慨,因為現在瀏覽器的世界大戰還是依然在持續膠著中,為了處理所謂的相容性,你必須要針對各家瀏覽器撰寫相容語法,例如:一句延遲語法,為了相容性必須要撰寫整整5條CSS (見下方範例):

  1. -webkit-animation-delay: 2.5s;
  2. -moz-animation-delay: 2.5s;
  3. -ms-animation-delay: 2.5s;
  4. -o-animation-delay: 2.5s;
  5. animation-delay: 2.5s;
複製代碼
因此,要普遍應用這種CSS3酷炫的動畫效果,現階段還是不太建議 , 其實講明白了最大問題還是出在IE , 例如這個案例在IE上就無法顯示效果 (包含SR數位工作室Banner 的動畫效果也是 ) , 有興趣的朋友可以直接看看IE9 這個網路發展害蟲的詳細介紹 。(IE9以下瀏覽器請直接無視)



收藏回覆 只看該作者 道具 舉報

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.116807 second(s), 47 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-11-21 21:16

回頂部