我该如何在这个网站中为导航创建悬停动画？
我该如何在这个网站中为导航创建悬停动画？
提问于 2018-06-03 00:57:31
该网站是https://ceremonycoffee.com/。如何复制带有下划线的导航悬停动画？我在他们的inspect元素里找不到。另外，它是由CSS还是Javascript制作的？谢谢!
回答 1
Stack Overflow用户
发布于 2018-06-03 01:01:14
你可以在完整的css中做到这一点，请看这段代码：
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}<h2><a href="#">My Link</a></h2>
它依赖于::before伪元素。将其水平缩放设置为零，添加一个过渡属性，以便在悬停时平滑地转换为完整的链接缩放。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50659176
复制相关文章
相似问题