在老 Zen Garden 网站上瞎逛时,我偶然发现了一种非常巧妙的下划线链接效果。我们之前 讨论过这个,但从未融入动画。
“行走链接”是指通过背景图片创建带点下划线的链接。当鼠标悬停或处于活动状态时,点开始动画并开始“行走”。这可以通过在悬停或活动状态下简单地交换图片来实现,这两个背景图片都来自同一个超级简单的 3 像素 Photoshop 文件。

常规状态使用非动画版本,悬停和活动状态使用动画版本。
a, a:visited {
background: url(images/dot.gif) repeat-x center bottom;
text-decoration: none;
padding-bottom: 2px;
color: #900;
}
a:hover, a:active {
background: url(images/dotwalk.gif) repeat-x center bottom;
}
查看示例以了解其工作原理。
很酷。如果将这两个 GIF 文件合并成一个文件,会不会更好呢?
我同意 Lim 的观点。对图像使用滑动门方法,并在静态和动画版本之间切换。这同样容易实现。
有趣的悬停使用方式。让我想起了 1997 年人们(现在仍然有人)在所有地方使用那些疯狂的 GIF 图片 *咳嗽* MySpace *咳嗽*。
@Chad,图像会更大,并且不容易拉伸。这样可以对任何大小的链接使用。
不要忘记 :focus 状态 ;-)
这个很酷,Chris,我将在我的新设计中使用它 :)
这很有趣——我不知道我是否会使用它,但这是一种巧妙的 GIF 使用方法。
虽然它确实很酷,但我不喜欢它的一点是它产生的噪音!
如果在网站的特定区域使用,它可能会很好,仅仅是为了吸引人们对这些区域的注意,否则如果在所有链接上使用,就会显得嘈杂。
从吸引注意力的角度来看,我认为这是一个与众不同的好方法。我认为人们一定会记住你的网站,因为这些链接看起来与其他所有链接完全不同。
这类链接让我恼火的一点是它造成的闪烁和动画开始播放前的轻微延迟。不过它肯定很有用……