CSS размывается только в одном направлении (размытие движения) ⇐ CSS

[Anonymous]

мне нужно динамически размыть изображение на моей странице, но только по одной оси (

Код: Выделить всё

Y

конкретно). So here are my requirements:


[*]Has to be done "live" (I can't pre-render a blurred version of the image)
[*]Like I said, only on the Y axis (like a motion blur, but vertical)
[*]Needs to animate in
Should work in IE9+< /li>
< /ul>

Моя первая мысль заключалась в том, чтобы использовать простой фильтр CSS: < /p>

Код: Выделить всё

img {
filter: blur(20px);
}
< /code>

Я могу анимировать это, добавив переход (transition: filter 0.2s linear

), но это только создает гауссовые блудки, что не тот эффект, который я хочу. Синтаксис не поддерживает что -то вроде фильтра: размытие (0 10px); < /code>, чтобы ограничить размытие только одной осью. Поэтому я создал SVG с именем filter.svg , который указывает размытие 20PX только вдоль оси y (

Код: Выделить всё

0 20< /code>): < /p>









< /code>

и применил его так: < /p>

img {
filter: url("filter.svg#blur");
}
< /code>

И это работает отлично ... но  только < /em> в Firefox. Safari/Chrome не поддерживает url () 

как значение для фильтра . Кроме того, я не могу анимировать это, потому что значение представляет собой URL, а не число, поэтому переход < /code> не работает. < /P>

Помимо всего, я не думаю, что ни один из этих подходов работает в IE9. Я изучал использование Canvas в качестве альтернативы, но не могу найти никаких примеров размытия, которое идет только в одном направлении.

Подробнее здесь: https://stackoverflow.com/questions/240 ... otion-blur