javascript - 网页设计 : Line effect with block reveal style animation on link click

Question

我目前正在尝试弄清楚如何对当前趋势进行编码，我已经看到这种效果在使用导航时经常使用，如此处所示 www.bearideas.fr ,

我在网上搜索了某种解释/教程，以了解线条以及最终 block 如何在每个单独的部分中显示，但我只能在 typmanus 上找到一个插件，这对我来说有点复杂尝试和从中学习但最终我无法让它工作或理解。

我想知道是否有人可以指出他们遇到的涉及此效果的任何教程的方向，或者可能会解释一下它是如何工作的。

很抱歉，如果我问的地方不正确，我的问题有点含糊，但我们将不胜感激。

提前致谢，迈克。

Answer 1

动画边框实际上不是 border 属性。它由 ::before 和 ::after ( ::before ) pseudo-elements 组成“附加”到每个导航元素，简而言之是 display: block with width: 1px, height: 100% 和一些 背景:#ccc。这些伪元素使用 CSS transform 缩小使用 transform: scaleY(0)。在 :hover ( :hover ) 上，它会缩小到完整大小。然后使用 CSS transitions 制作动画，在这种情况下精确使用 .35s cubic-bezier(.77,0,.175,1)。

其实并没有那么难，所以不要被这些文章吓到!

至于悬停时导航元素变灰，可能是一些javascript逻辑。

顺便说一句。您可以检查页面并自己查看实现。按 F12 并浏览。