如何使用CSS为边界过渡动画设置动画? [英] How to animate border transition expand with CSS?

问题描述

我正在尝试创建一个CSS过渡，其中a href元素的border-bottom在:hover上扩展到链接的宽度.

I'm trying to create a CSS transition where the border-bottom of a href element expands on :hover to the width of the link.

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

What I could find is a CSS solution where the background width is animated: http://jsfiddle.net/mfn5nefb/82/

但这不是我想要的，因为单击导航选项卡后，我想保留边框.因此，我必须直接为边框设置动画，而不是背景.

But that's not what I want, because after click on a navigation tab I want to leave the border as is. So I'd have to directly animate the border, instead of the background.

<!-- 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;
}

在这里，您看到活动"链接显示绿色边框.在悬停时，我想为其他选项卡设置动画，但边框本身为动画.当前，背景是动画的，出现在边框的上方，因此看起来未对齐.

Here you see the "active" link gets a green border. And on hover I'd like to animate the other tabs, but the border itself. Currently the background is animated, which appears above the border and thus looks misaligned.

推荐答案

您仍然可以通过使用伪元素(带有background)并将其扩展到hover上来实现.所需要做的只是将bottom属性的值设置为预期border-width的倒数，还将伪元素的height设置为与border-width相同.

You can still achieve this by using a pseudo-element (with background) and expand it on hover. All that is required is to set the value for the bottom property as the inverse of expected border-width and also set the height of the pseudo-element to be the same as the 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在X轴上位于50%，因此边框看起来好像是从中心开始扩展的.

Another way to achieve the same effect using the border property itself would be to use transform: scale like in the below snippet. Here the scaleX(0) makes the original width of the element as 0 and on hover it is transitioned to full width using scaleX(1). Since, default transform-origin is at 50% in X-axis, the border looks as though it is expanding from the center.

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>

这篇关于如何使用CSS为边界过渡动画设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！