jquery - 如何用 CSS 绘制随机线以复制效果

Question

我不确定如何称呼这种效果，甚至不知道如何查找它。我想做类似的事情。将鼠标悬停在导航栏上的链接上，您会看到我在说什么。

http://www.bleedingthrough.com/

[编辑]澄清。这是一种悬停效果，在导航菜单中的链接上似乎绘制了随机线条。我将如何制作类似的效果？

[编辑] 如何通过使用 CSS、HTML5 和/或 Javascript 在单词上画线来复制这种效果？

Answer 1

它是通过闪存完成的。如果您右键单击菜单，您可以看到它。但是可以用 HTML/CSS/CSS3 做一些类似的事情。像 jQuery 这样的 JavaScript 框架也会对你有所帮助。

少数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") 
}

祝你好运！