Question

我试图解决这个问题，但我无法理解他用过的代码。

我想重新创造类似于右上角效果的东西。动画滑动条在显示和消失时会改变颜色。

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

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

php

phpinfo();

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注释中找到解释。

动画颜色改变下划线效果

1 个答案: