如何制作行走链接

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

在老 Zen Garden 网站上瞎逛时,我偶然发现了一种非常巧妙的下划线链接效果。我们之前 讨论过这个,但从未融入动画。

“行走链接”是指通过背景图片创建带点下划线的链接。当鼠标悬停或处于活动状态时,点开始动画并开始“行走”。这可以通过在悬停或活动状态下简单地交换图片来实现,这两个背景图片都来自同一个超级简单的 3 像素 Photoshop 文件。

photoshopanimation.png

常规状态使用非动画版本,悬停和活动状态使用动画版本。

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;
   }

查看示例以了解其工作原理。

[查看示例]