我正在尝试申请 linear-gradient
至 border-bottom
在 hover
到<a>
但它并不是 100% 有效我的目标是尽可能使用 HTML 和 CSS 来实现。
这是我的代码:
a {
font-size: 30px;
text-decoration: none;
color: #666;
cursor: pointer;
padding-right: 3%;
padding-bottom: 3%;
position: relative;
display: inline-block;
}
a:after {
content: '';
position: absolute;
left: -50%;
right: 0%;
border-top: 0;
border-left: 0;
border-right: 0;
border-image: -webkit-linear-gradient(left, #f0f0f0, #0a389b, #f0f0f0);
border-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
border-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
border-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
transition: all 0.5s linear;
bottom: 0;
opacity: 0;
}
a:hover:after {
border-right: 25vh;
right: 0%;
opacity: 1;
}
<div>
<a href="#">First</a>
<a href="#">Second</a>
<a href="#">This is the third</a>
</div>
如您所见border-bottom
不在 center
中并且不适合 width
的 <a>
width
.
最佳答案
您可以使用此处描述的相同技术:Expand bottom border from center on hover有两个box-shadows在左右边缘创建淡出效果:
a {
font-size: 30px;
text-decoration: none;
color: #666;
cursor: pointer;
padding-right: 3%;
padding-bottom: 3%;
position: relative;
display: inline-block;
}
a:after {
display:block;
content: '';
height:4px;
background:#019fb6;
transform: scaleX(0.0001);
transition: transform 250ms ease-in-out;
box-shadow: inset -40px 0px 30px -25px #fff, inset 40px 0px 30px -25px #fff;
}
a:hover:after {
transform: scaleX(1);
}
<div>
<a href="#">First</a>
<a href="#">Second</a>
<a href="#">This is the third</a>
</div>
注意:您需要插入供应商前缀以最大化浏览器支持(请参阅 canIuse)。
关于css - 悬停时的线性渐变底部边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34153188/