After attempting to decipher the code used by the creator, I still couldn't quite grasp it.
I am eager to recreate a similar effect to the animated sliding bar in the top right corner. The way it changes color as it appears and disappears is quite mesmerizing.
I believe the foundation of this effect lies in the code from . Although I have been able to make the sliding bar change color using this code, the transition isn't as smooth and the color change feels too abrupt.
This is my attempt: 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>