[問題] css blur+jquery animate

作者: KawasumiMai (さあ、死ぬがいい)   2014-08-18 00:58:38
css應該...是在這裡討論吧?
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: url(blur.svg#blur);
這是拿來霧化的css
會這麼多行當然是拿來應付各個瀏覽器用的
然後最後一行,為什麼用url
是因為前面那幾行對firefox不知道為什麼都沒有效
只好用另外的方法
現在的問題是要怎樣讓他動態轉換霧化程度
也就是從5px變成0px這樣
上網看到的解法是
http://stackoverflow.com/questions/20082283/animate-css-blur-filter-in-jquery
用step
可是總覺得他效果的先後順序不太一樣
另外對firefox也無效
猜測是因為使用url
然而就算修改為url("")或更改為其他濾鏡url(blur.svg#nonblur);
他還是無法做動態效果
請問這部分要怎麼處理
作者: leochen0818 (Leo)   2014-08-18 17:54:00
CSS的話,應該去Web_Design問會好一點@@http://jsbin.com/rorowu/1/edit連結是小弟的解法,不過小弟目前測試是只有Chrome有作用,IE跟FF不甩我,所以就只有留下webkit的@@"至於其他瀏覽器的話,就再自行估狗囉!
作者: eight0 (欸XD)   2014-08-18 18:42:00
..那個 url 是濾鏡 svg 檔,要把它存在同目錄底下才有用
作者: KawasumiMai (さあ、死ぬがいい)   2014-08-19 10:52:00
url那個svg沒問題,FF已經做出霧化了現在的問題不是出在霧化無法顯示而是無法AnimateCSS3的部分貌似有解但FF只甩svg,而svg吃檔案又好像無法計算補間也無法切換svg,才會有這個問題

Links booklink

Contact Us: admin [ a t ] ucptt.com