网页设计：链接效果与块显示样式动画链接点击

Question

我目前正在试图弄清楚当前趋势是如何编码的，我已经看到使用导航www.bearideas.fr，

时常常使用此效果

我在网上搜索了一些解释/教程，关于行如何以及最终块在每个单独的部分中显示但是我只能在typmanus上找到一个插件，这对我来说有点复杂从中学习，最终我无法使其工作或理解。

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

很抱歉，如果这是不正确的地方，我理解我的问题有点模糊，但任何类型的帮助都将不胜感激。

先谢谢你，迈克。

Answer 1

动画边框实际上不是border属性。它是由::before和::after（::before）pseudo-elements“附加”到每个导航元素组成的，display: block width: 1px height: 100% ，background: #ccc和一些transform: scaleY(0)。使用:hover使用CSS transform缩小这些伪元素。在.35s cubic-bezier(.77,0,.175,1)（:hover）上，它缩小为完整尺寸。然后使用CSS transitions进行动画处理，在这种情况下使用"my string"[0..15].ljust(16,'0') 。

实际上并不那么难，所以不要让这些文章吓到你！

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

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