Как нарисовать случайные строки с помощью CSS для репликации эффекта

Question

Я не уверен, что назвать этим эффектом или даже как его искать. Я хочу сделать что-то подобное. Наведите указатель мыши на ссылки на панели навигации, и вы увидите, о чем я говорю.

http://www.bleedingthrough.com/

[EDIT] Для уточнения. Это эффект зависания, при котором случайные линии отображаются по ссылкам в меню навигации. Как я мог бы сделать аналогичный эффект?

[EDIT] Как воспроизвести этот эффект, нарисуя строки над словами, используя CSS, HTML5 и/или Javascript?

Answer 1

Это делается через вспышку. Если вы щелкните правой кнопкой мыши по меню, вы увидите его. Но с HTML/CSS/CSS3 можно сделать несколько похожее. Также вам будет полезна инфраструктура JavaScript, такая как jQuery.

Мало EG:

http://designshack.net/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste/

Answer 2

В дополнение к анимированного GIF, вы могли бы получить что-то подобное с некоторыми довольно простой CSS. Создайте фоновое изображение, затем примените его к вашим навигационным ссылкам при наведении.

По общему признанию, он не имеет эффекта затухания, но он прост, имеет низкую пропускную способность и хорошо работает на мобильных устройствах.

http://jsfiddle.net/panchroma/Lm3MF/

CSS

a:hover, a:active{ 
background: url("path-to-your-background.gif") 
} 

Успехов!