如何使用CSS扩展边界过渡动画？

Question

我试图创建CSS过渡,其中border-bottom的a href元素扩展:hover到链接的宽度.

我能找到的是CSS解决方案,其中包含background width动画:http: //jsfiddle.net/mfn5nefb/82/

但这不是我想要的,因为点击导航选项卡后我想保持原样.所以我必须直接为边框设置动画,而不是背景.

<!-- assume the border-bottom is only applied to an active=clicked navigation tab -->
<h1 style="border-bottom: 3px solid green;">CSS IS AWESOME</h1>

h1 {
    color: #666;
    position: relative;
    display: inline-block;
}

h1:after {
    position: absolute;
    left: 50%;
    content: '';
    height: 40px;
    height: 5px;
    background: #f00;
    transition: all 0.5s linear;
    width: 0;
    bottom: 0;  
}

h1:hover:after {
    width: 270px;
    margin-left: -135px;
}

在这里,您可以看到"活动"链接获得绿色边框.在悬停时,我想为其他标签设置动画,但边框本身.目前背景是动画的,它出现在边框上方,因此看起来不对齐.

Answer 1

您仍然可以通过使用伪元素(with background)并将其展开来实现此目的hover.所需要的只是将bottom属性的值设置为预期的倒数,border-width 并将height伪元素的值设置为与border-width.

h1 {
  color: #666;
  position: relative;
  display: inline-block;
}
h1:after {
  position: absolute;
  left: 50%;
  content: '';
  height: 3px;
  background: #f00;
  transition: all 0.5s linear;
  width: 0;
  bottom: -3px;
}
h1:hover:after {
  width: 100%;
  left: 0px;
}

<!-- assume the border-bottom is only applied to an active=clicked navigation tab -->
<h1 style="border-bottom: 3px solid green;">Tab1</h1>
<h1>Tab2</h1>

使用border属性本身实现相同效果的另一种方法是使用transform: scale类似下面的代码段.这里scaleX(0)使元素的原始宽度为0,并在hover其上使用转换为全宽scaleX(1).因为,默认transform-origin为50%X轴,边界看起来好像是从中心扩大.

h1 {
  color: #666;
  position: relative;
  display: inline-block;
}
h1:after {
  position: absolute;
  left: 0%;
  top: 0%;
  content: '';
  height: 100%;
  transition: all 0.5s linear;
  width: 100%;
  border-bottom: 3px solid red;
  transform: scaleX(0);
}
h1:hover:after {
  transform: scale(1);
}

<!-- assume the border-bottom is only applied to an active=clicked navigation tab -->
<h1 style="border-bottom: 3px solid green;">Tab1</h1>
<h1>Tab2</h1>