动画变色下划线效果

Question

我试图弄清楚这一点，但我无法理解他使用了什么代码。

http://riccardozanutta.com/

我想重新创建类似于他在右上角的效果的东西。动画滑动条在出现和消失时改变颜色。

我很确定来自http://bradsknutson.com/blog/css-sliding-underline/ 的代码是这个的基础。我已经设法让滑动条使用它来改变颜色，但它不是那么平滑并且颜色变化太突然。

我的尝试： http://codepen.io/Dingerzat/pen/mOmzVp

/* CSS */

.sliding-u-l-r-l {
    display: inline-block;
    text-decoration:none;
    color: #000000;
    position: relative;
    padding-bottom: 3px;
}
.sliding-u-l-r-l:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    transition: width 0s ease, background .5s ease;
}
.sliding-u-l-r-l:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: blue;
    transition: width .5s ease;
}
.sliding-u-l-r-l:hover:before {
    width: 100%;
    background: red;
    transition: width .5s ease;
}
.sliding-u-l-r-l:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
}

.

<!-- HTML -->
    <a class=sliding-u-l-r-l href="http://codepen.io">A link that is and never is</a>

Answer 1

您正在寻找这样的东西：

HTML

<a class=sliding-u-l-r-l href="http://codepen.io">A link that is and never is</a>

CSS

.sliding-u-l-r-l {
    display: inline-block;
    text-decoration:none;
    color: #000000;
    position: relative;
    padding-bottom: 3px;
}
.sliding-u-l-r-l:before {
    /*
      We moved the background color in here so that we remain
      visible after the link has been unhovered.
    */
    background: red;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    /*
      Take 1 second for the red underline's change in width to take affect.
      We don't want the background to fade out, so we removed the
      background transition.
      */
    transition: width 1s ease;
}
.sliding-u-l-r-l:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: blue;
    /*
      Change 1s to whatever length of time you want the blue underline to take.
      */
    transition: width 1s ease;
    /*
      Don't do our transition until the red underline has finished theirs.
      This should be at least as long as the length of the red transition.
    */
    transition-delay: 1s;
    /*
      Make sure the blue underline shows underneath the red one.
    */
    z-index: -1;
}
.sliding-u-l-r-l:hover:before {
    /*
      We don't need a background color in here anymore.
    */
    width: 100%;
    transition: width .5s ease;
}
.sliding-u-l-r-l:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
}

---

其他：

PS：如果您有任何问题或需要任何其他说明，请尽管提问。

PPS： Here's a link to an example.

P^3S: CSS 被注释了。如果某些内容没有意义或您不理解某些内容，您可能会在 CSS cmets 中找到解释。