CSS下划线动画 - 阅读方向

问题描述：

我发现了一个代码来为链接的下划线设置动画，但我想在另一个方向上，因为我们从左向右阅读，而实际上却是相反的。下面是一个JSFiddle CSS下划线动画 - 阅读方向

.sliding-u-l-r-l-inverse { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
} 
 

 
.sliding-u-l-r-l-inverse:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 3px; 
 
    width: 100%; 
 
    transition: width 0s ease; 
 
} 
 

 
.sliding-u-l-r-l-inverse:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    height: 3px; 
 
    width: 100%; 
 
    background: blue; 
 
    transition: width .8s ease; 
 
} 
 

 
.sliding-u-l-r-l-inverse:hover:before { 
 
    width: 0%; 
 
    background: blue; 
 
    transition: width .8s ease; 
 
} 
 

 
.sliding-u-l-r-l-inverse:hover:after { 
 
    width: 0%; 
 
    background: transparent; 
 
    transition: width 0s ease; 
 
}

<div class="sliding-u-l-r-l-inverse"> 
 
    I want it to slide on the other direction. 
 
</div>

答

变化值宣言左右。

即.sliding-u-l-r-l-inverse:before由left:0变化的，为了right:0和相同在其他pseudo selector :afterright:0到left:0。这改变了方向并使线从left to right开始。

.sliding-u-l-r-l-inverse { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
} 
 

 
.sliding-u-l-r-l-inverse:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    height: 3px; 
 
    width: 100%; 
 
    transition: width 0s ease; 
 
} 
 

 
.sliding-u-l-r-l-inverse:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 3px; 
 
    width: 100%; 
 
    background: blue; 
 
    transition: width .8s ease; 
 
} 
 

 
.sliding-u-l-r-l-inverse:hover:before { 
 
    width: 0%; 
 
    background: blue; 
 
    transition: width .8s ease; 
 
} 
 

 
.sliding-u-l-r-l-inverse:hover:after { 
 
    width: 0%; 
 
    background: transparent; 
 
    transition: width 0s ease; 
 
}

<div class="sliding-u-l-r-l-inverse"> 
 
    I want it to slide on the other direction. 
 
</div>

@Leshautsdurant当你加入，你发现代码动画下划线，所以我建议你有后台更改为不同的颜色，了解它是如何工作的。 – frnt

完美工作，谢谢！ –

欢迎@Leshautsdurant :-) – frnt

答

.sliding-u-l-r-l-inverse { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
} 
 

 
.sliding-u-l-r-l-inverse:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    height: 3px; 
 
    width: 100%; 
 
    transition: width 0s ease; 
 
} 
 

 
.sliding-u-l-r-l-inverse:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; /* changed from 'right' */ 
 
    bottom: 0; 
 
    height: 3px; 
 
    width: 100%; 
 
    background: blue; 
 
    transition: width .8s ease; 
 
} 
 

 
.sliding-u-l-r-l-inverse:hover:before { 
 
    width: 0%; 
 
    background: blue; 
 
    transition: width .8s ease; 
 
} 
 

 
.sliding-u-l-r-l-inverse:hover:after { 
 
    width: 0%; 
 
    background: transparent; 
 
    transition: width 0s ease; 
 
}

<div class="sliding-u-l-r-l-inverse"> 
 
    I want it to slide on the other direction. 
 
</div>

CSS下划线动画 - 阅读方向

相关推荐