玩转链接悬停效果 | CSS-Tricks

我与一位设计师在最近的团队会议上展示了设计稿。她出色地将设计系统概念拼凑在一起，从组件到模式以及介于两者之间的所有内容，足以让任何前端开发人员感到高兴。

但是，她作品中一个微不足道的细节吸引了我的眼球：链接的悬停状态是一个波浪。

嗯！不仅我以前没见过这个，而且这个想法从未在我的脑海中出现过。事实证明，在实际网站上有很多这样的例子，其中之一是 The Outline。这就是启发了这种设计的实施。

很酷，我想。我们可以做一些类似线性背景渐变或甚至背景图像的东西。但是！这不是设计的终点。事实证明它也是动画的。再次来自 The Outline

哇！真是太疯狂了。老实说，我不知道该怎么处理它，因为我对初始想法中的任何一个进行动画处理都很困难，尤其是在跨浏览器支持方面。

那么，The Outline 是怎么做到的呢？事实证明，它是 SVG。我们可以制作一条波浪形的路径并轻松地对其进行动画处理。

查看笔波浪 by Geoff Graham (@geoffgraham) on CodePen.

但是，它如何与链接一起使用呢？嗯，我们可以将 SVG 用于 background-image 属性

查看笔波浪 by Geoff Graham (@geoffgraham) on CodePen.

但是，这有点糟糕，因为我们无法真正对其进行动画处理。我们需要更好的值。但是，我们可以将内联 CSS 直接添加到 background-image 属性中的 SVG 中。我们不能简单地将 SVG 代码复制粘贴到属性中，但我们可以使用一些适当的编码来实现。

查看笔波浪 by Geoff Graham (@geoffgraham) on CodePen.

而且，由于 SVG 可以在标记中包含自己的样式，因此动画可以像在 HTML 文档头部或 HTML 中的内联 CSS 中一样，直接添加到 background-image 属性中。

查看笔波浪 by Geoff Graham (@geoffgraham) on CodePen.

如果我们愿意，可以稍微改变一下它的样式。

查看笔链接效果 - 波浪 by Geoff Graham (@geoffgraham) on CodePen.

真是太鼓舞人心了！

我不知道动画波浪是否能带来良好的用户体验，坦率地说，这不是这篇文章的重点。重点是 The Outline 有一个有趣的想法，并用精巧的 CSS 实现。

这让我开始思考我们可以对链接进行哪些其他非标准（甚至非传统）的悬停样式。再次，抛开可用性，尽情享受 CSS 的乐趣……

边框到背景效果

也许默认链接上的同一个底部边框可以在悬停时增长并成为链接的完整背景。

查看笔链接效果 - 悬停时背景 by Geoff Graham (@geoffgraham) on CodePen.

哎呀，我们甚至可以水平地做类似的事情。

查看笔链接效果 - 水平背景 by Geoff Graham (@geoffgraham) on CodePen.

带轮廓的文本效果

让我们去掉字体颜色，留下一个轮廓。

查看笔链接效果 - 悬停时轮廓 by Geoff Graham (@geoffgraham) on CodePen.

凸起的文本效果

另一个想法是让文本突出显示，就像它在悬停时从页面中长出来一样。

查看笔链接效果 - 悬停时凸起文本 by Geoff Graham (@geoffgraham) on CodePen.

字体交换效果

这太不切实际了，让我笑出声来，但为什么不呢？

查看笔链接效果 - 悬停时交换字体 by Geoff Graham (@geoffgraham) on CodePen.

“调高音量，克里斯”效果

对不起，克里斯。你知道你喜欢它。 ❤️

查看笔链接效果 - 调高音量，克里斯！ by Geoff Graham (@geoffgraham) on CodePen.

你能想出什么？

有想法吗？请在评论中告诉我，我会把它们放到我创建的 CodePen 集合中。

Luke Pettway

# 2018年9月21日

“调高音量，克里斯”效果是最好的，你应该立即将此网站上的所有链接更新为这个效果。

Rachel

# 2018年9月21日

哦，我喜欢边框到背景的例子。我一直只是在悬停/聚焦时进行无聊的颜色或下划线更改，我得试试那个 :)

Music47ell

# 2018年9月22日

我还在 The Outline 推出时写了关于波浪线的文章。

你一定要看看。

Francky

# 2018年9月22日

嗨，Geoff，
在“调高音量，克里斯”效果中，我想背景图片的宽度可以获得一个 px 单位，以减少整个宽度，并使悬停在高度较小的设备（横向模式下的手机）上消失。

另一种选择是使用图像而不是背景图像，这也很容易在 IE11（适用于 Windows-7 用户）中使用。
查看这个替代方案：clba.nl/experiments/another-link-hover-effect.htm

杰克

# 2018年9月23日

OMG WTH！非常棒的悬停动画效果，我第一次看到！

我一定会用在我的网站上：）

正在寻找更多想法...

奥克萨娜·福图纳托

# 2018年9月23日

您好，Geoff，感谢您撰写这篇精彩的文章。只有在阅读本文后，我才发现通过 CSS 动画 SVG 的巨大潜力，并且刚刚意识到 UTF-28 编码字符“%3C … %3E”的真正含义。因此，是否有理由和可能性在 CSS 中以相同的方式使用例如 SVG 的“desk”、“title”和“use”标签？
好吧，我注意到，在悬停状态下，将背景大小更改为 20px 而不是“auto”会更好，因为它会切断和底部摆动，并在动画过程中将其框起来。这里的 20px 等于 SVG 的 viewBox 的大小。

Geoff Graham

评论永久链接# 2018年9月24日

嘿，奥克萨娜！问题很好。我不确定我是否能想到添加这些属性的理由，但我认为这不会造成任何伤害！虽然这个例子让我想到了使用text标签将内容放入 div 作为content属性的替代方法。

罗伯

# 2018年9月24日

太棒了！但是移动设备呢？

Geoff Graham

评论永久链接# 2018年9月24日

大多数移动浏览器会忽略悬停效果，或者根据链接行为在触摸时激活它们。我不会期望这些实验（或许多其他悬停效果）能很好地转换为移动设备。

也就是说，我确实记得三星几年前做过的事情，它允许在实际将手指悬停在物体上时实现悬停效果。

艾莉安娜·布里森

# 2018年9月24日

CSS 仍然非常强大，许多开发人员已经找到了通过 CSS 实现奇迹的独特方法。我们大多数人过去认为它是一种用于网站高级格式化的旧语言，但一些开发人员已经证明他们是错的。

大卫·卡里略

# 2018年9月24日

字母弹跳怎么样？使用一些 CSS 动画会很酷。

尼尔·弗林

# 2018年9月24日

太棒了！老的 MK 游戏效果很棒 http://rubentd.com/img/toasty.png

斯蒂芬·J·克罗宁

# 2018年9月24日

很棒的文章！实际上我是 The Outline 的摆动代码的作者。我认为您对代码的分解非常到位。这种方法的想法来自于我对我们所需功能的一些要求。我们希望摆动能够

跨两行下划线文本
在悬停时进行动画处理
下划线不同大小的文本
能够以任何颜色显示

SVG 允许动态调整大小和颜色。将其作为background-image将允许多行摆动。至于回退到 SVG 的 CSS 过渡，这是相当实验性的。效果很好，所以我们最终决定使用这个解决方案。

Geoff Graham

评论永久链接# 2018年9月24日

太棒了，这是很棒的上下文！感谢分享，而且工作做得非常好。:)

贝内迪克特·福雷斯特

# 2018年9月24日

您可以通过动画background-position值来动画处理第二个示例中的背景图像。像这样

@keyframes shift 
    from {
        background-position: 0 bottom;
    }
    to {
        background-position: -20px bottom;
    }
}

a:hover {
    animation: shift .3s linear infinite;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/squiggle.svg");
    background-repeat: repeat-x;
    background-size: 20%;
    border-bottom: 0;
    padding-bottom: .3em;
    text-decoration: none;
}

SelenIT

# 2018年9月27日

很棒的启发性示例！但是……在轮廓文本示例中使用-webkit-text-fill-color: transparent而不是color: transparent是否更好，将普通的color保留下来作为可靠的备用方案？使文本对所有浏览器都不可见有什么用，包括不支持非标准（尽管包含在 WHATWG 所谓的“兼容性标准”中）装饰功能的浏览器？

Geoff Graham

评论永久链接# 2018年9月27日

是的，当然！如果计划在生产中使用该示例，这将是最好的方法。

本文中的版本确实对不支持轮廓的浏览器提供了备用方案，但也许该条件块也可以包含将颜色交换为更受支持的颜色。
SelenIT

评论永久链接# 2018年9月27日

不幸的是，@support not(...) {}块中的代码在不支持@support本身的浏览器中将不起作用，但无条件的color: transparent几乎可以在任何地方使用：()

Boaz Rossano - 2Cents - 领先的 UX 设计机构（特拉维夫，以色列）

# 2018年10月4日

喜欢它 - 我希望我能将它添加到我在 Wix 上的网站上...

奥克萨娜·福图纳托

# 2018年10月5日

你说得对，Geoff，大多数 SVG 属性都可以在 URL 数据中使用，只需要正确的语法，而且维护起来有点麻烦。有两位贡献者提供了带有“desc”、“g”、“use”、“text”、“textPath”的示例。我并不打算将它们声明为链接的适当动画效果，它更像是我的 CSS SVG 案例研究
一个
 两个

沙乌里亚·舒布汉

# 2018年10月6日

如果我们将字体交换效果更改为 -

a:hover {
  font-family: Poppins, sans-serif;
  font-weight: 900;
}

并包含 Poppins 而不是 Creepster，这是一个不错且有趣的效果

此评论线程已关闭。如果您有重要信息要分享，请联系我们。