如何用CSS绘制随机线来复制效果

时间:2013-05-19 16:35:06

标签: jquery html css html5 css3

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

http://www.bleedingthrough.com/

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

[编辑]如何通过使用CSS,HTML5和/或Javascript在单词上画线来复制此效果?

2 个答案:

答案 0 :(得分:0)

通过闪光完成。如果右键单击菜单,则可以看到它。但是有可能与HTML / CSS / CSS3有些相似。像jQuery这样的JavaScript框架也会对你有所帮助。

很少的EG:

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

答案 1 :(得分:0)

除了动画GIF之外,你可以通过一些相当简单的CSS获得类似的东西。创建背景图像,然后在悬停时将其应用于导航链接。

不可否认,它没有淡入效果,但它简单,带宽低,并且在移动设备上运行良好。

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

<强> CSS

a:hover, a:active{
background: url("path-to-your-background.gif") 
}
祝你好运!