悬停时的线性渐变底部边框

Question

悬停时的线性渐变底部边框

4

我正在尝试将 linear-gradient 应用于 <a> 的 border-bottom，但它没有完全生效。我的目标是只用 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不在中心位置，并且不适合<a>标签的width宽度。

- Mohammed Moustafa

2个回答

3

您可以使用与此处描述的相同技术：在悬停时从中心扩展底部边框，使用两个 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）。

- web-tiki

-webkit-transform: scaleX(0.0001); -webkit-transition: transform 250ms ease-in-out; -ms-transform: scaleX(0.0001); -ms-transition: transform 250ms ease-in-out; transform: scaleX(0.0001); transition: transform 250ms ease-in-out; - Mohammed Moustafa

@MohammedMoustafa 好的，你在 -webkit-transition 声明中缺少了 -webkit- 前缀，请参考这个链接：http://jsfiddle.net/webtiki/fn1yb3gb/ - web-tiki

@Web-kiti，你说得没错，但不幸的是，在Safari上仍然没有应用过渡效果。 - Mohammed Moustafa

@Web-Kiti Safari 5.1.7 - Mohammed Moustafa

1

@MohammedMoustafa 首先，那个版本非常过时。其次，它不支持伪元素的转换，因此您需要添加另一个元素（如 span），并将转换放在该元素上。 - web-tiki

显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

您也可以通过将linear-gradient添加为background-image来实现此功能。为了使其起作用，背景图像应该位于元素的中心底部，并且其大小在X轴上应最初设置为0%。悬停时，大小应在X轴上过渡到100%。渐变在Y轴上的大小是边框的厚度。

在此方法中，您不需要任何额外的元素，但是渐变的浏览器支持要低于盒子阴影的支持。线性渐变仅适用于IE10+。

a {
  display: inline-block;
  padding-right: 3%;
  padding-bottom: 3%;
  color: #666;
  font-size: 30px;
  text-decoration: none;
  cursor: pointer;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);  
  background-image: linear-gradient(to right, #f0f0f0, #8c8b8b, #f0f0f0);
  background-position: 50% 100%;
  background-size: 0% 4px;
  background-repeat: no-repeat;
  transition: all 0.5s linear;
}
a:hover {
  background-size: 100% 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

如Can I Use - Notes中所述，Safari不支持线性渐变的to [side]语法，因此请添加以下代码以支持Safari。

background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

_{不要忘记根据浏览器版本添加-webkit-transition。}