作者KawasumiMai (全力全壊)
看板Ajax
标题[问题] css blur+jquery animate
时间Mon Aug 18 00:58:38 2014
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);
他还是无法做动态效果
请问这部分要怎麽处理
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 114.42.106.169
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Ajax/M.1408294722.A.9A0.html
1F：推 leochen0818: CSS的话，应该去Web_Design问会好一点@@ 08/18 17:54
3F：→ leochen0818: 连结是小弟的解法，不过小弟目前测试是只有Chrome有 08/18 17:55
4F：→ leochen0818: 作用，IE跟FF不甩我，所以就只有留下webkit的@@" 08/18 17:56
5F：→ leochen0818: 至於其他浏览器的话，就再自行估狗罗！ 08/18 17:58
6F：推 eight0: ..那个 url 是滤镜 svg 档，要把它存在同目录底下才有用 08/18 18:42
7F：→ KawasumiMai: url那个svg没问题，FF已经做出雾化了 08/19 10:52
8F：→ KawasumiMai: 现在的问题不是出在雾化无法显示而是无法Animate 08/19 10:52
9F：→ KawasumiMai: CSS3的部分貌似有解但FF只甩svg，而svg吃档案又好像 08/19 10:53
10F：→ KawasumiMai: 无法计算补间也无法切换svg，才会有这个问题 08/19 10:53