网页设计:点击链接时，线条效果与块显示样式动画
网页设计:点击链接时，线条效果与块显示样式动画
提问于 2017-08-19 23:59:47
我目前正在尝试弄清楚如何对当前趋势进行编码，我已经看到在使用导航www.bearideas.fr时经常使用这种效果，
我已经在网上搜索了一些解释/教程，关于线条和最终的块是如何在每个单独的部分中显示的，但我只能找到一个关于typmanus的插件，这对我来说尝试和学习有点复杂，最终我无法让它工作或理解。
我想知道是否有人可以给我指出他们遇到的任何涉及这种效果的教程的方向，或者可能解释一下它是如何工作的。
抱歉，如果这是不正确的地方问，因为我理解我的问题是有点含糊，但任何类型的帮助将不胜感激。
提前谢谢你，迈克。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-20 00:40:26
动画边框实际上并不是border属性。它由::before和::after (::before) pseudo-elements“附加”到每个导航元素组成，简而言之就是带有width: 1px、height: 100%和一些background: #ccc的display: block。这些伪元素通过使用transform: scaleY(0)的CSS transform缩小。在:hover (:hover)上，它被缩小到全尺寸。然后使用CSS transitions对其进行动画处理，在本例中正是使用.35s cubic-bezier(.77,0,.175,1)。
其实并不难，所以不要让这些文章吓到你！
至于在悬停时灰显导航元素，这可能是一些javascript逻辑。
顺便说一句。您可以检查页面并亲自查看实现。按F12键并浏览。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45773586
复制相关文章
相似问题
腾讯云开发者
