html - 动画变色下划线效果

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

---

其他:

附注:如果您有任何疑问或需要任何额外说明，请直接提问。

PPS: Here's a link to an example.

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