该网站是https://ceremonycoffee.com/。如何复制带有下划线的导航悬停动画?我在他们的inspect元素里找不到。另外,它是由CSS还是Javascript制作的?谢谢!
发布于 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
伪元素。将其水平缩放设置为零,添加一个过渡属性,以便在悬停时平滑地转换为完整的链接缩放。
https://stackoverflow.com/questions/50659176
复制相似问题