2011-03-15 213 views
1

我試圖找到一個透明背景的動畫進度條。我寧願使用JQuery,Javascript和/或CSS來實現它。這可能嗎?我很想這樣的事情:http://www.fcm.travel/progress_bar.gif有沒有人遇到過這樣的事情?透明背景進度條?

我在這裏看到的其他問題顯示靜態欄,沒有什麼動畫很像這個例子。

+0

你爲什麼不只是使用純CSS,讓您的進度欄透明,很多怎麼辦資源的有它 – 2011-03-15 21:46:41

+0

編輯我的問題,使我想要更明顯。對不起 – Skizit 2011-03-15 21:49:38

+1

忘記這些人好問題,+1好友。 – 2011-03-15 21:52:24

回答

0

技術上,動畫PNG將整齊此。然而,我上次檢查時對它的支持並不那麼寬。

所以,你可以做什麼,看你是開放的JavaScript解決方案,是創建一個基於24位PNG的精靈圖像,因此它具有很好的透明度,包含動畫的每個狀態。然後用JavaScript和足夠好的定時器/時間間隔,只需更改圖像的背景位置,使其看起來像展示實時動畫。

+0

例如,StackOverflow標誌是一個更大的圖像集合的裁剪,您可以在這裏查看:http://sstatic.net/stackoverflow/img/sprites.png?v=3 – 2011-03-15 21:51:33

1

你可以用CSS做任何透明的東西。下面讓75%的不透明度(25%透明)

style="opacity: .75; filter: alpha(opacity=75)" 

(額外的過濾規則是IE)

編輯:如果你關心,它的作品儘可能經常在舊的瀏覽器,你會增加老-webkit--moz-規則

style="opacity: .75; filter: alpha(opacity=75); -moz-opacity: .75; -webkit-opacity: .75" 

在瀏覽器不支持不透明度設置時,它會自動回到默認100%不透明度這是不是在所有

透明或半透明
+0

有一個用於mozilla我是確保它的-moz-opacity()+1爲完美anwser。 – 2011-03-15 21:51:49

+0

我在'-moz-'和'-webkit-'規則中編輯過。 Firefox和Chrome不需要前綴,並且在一段時間內不需要它。我沒有測試Safari或更舊的版本。 @Steven – 2011-03-16 12:54:18

0

我剛做的東西,將您感興趣的前幾天,看看這個progress bar