我在互联网上发现了此CSS代码,它创建了下划线动画效果,我需要将其反转为从右到左而不是从左到右.
.nav-item a {
display: inline-block !important;
&:after {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all .3s cubic-bezier(.19,1,.22,1);
-moz-transition: all .3s cubic-bezier(.19,1);
transition: all .3s cubic-bezier(.19,1);
-webkit-transform: scaleX(0) translate3d(0,0);
-moz-transform: scaleX(0) translate3d(0,0);
transform: scaleX(0) translate3d(0,0);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
display: block;
height: 4px;
width: 100%;
background-color: #6cb2eb;
-o-transition: all .3s cubic-bezier(.19,1);
opacity: 1;
content: "";
}
&:hover {
&:after {
-webkit-transform: scaleX(1) translate3d(0,0);
-moz-transform: scaleX(1) translate3d(0,0);
transform: scaleX(1) translate3d(0,0);
}
}
}
我试图将&：after从scaleX(1)更改为scaleX(-1),它可以按我的需要工作,但与文本距离较远.
最佳答案
只需将transform-origin从0 0更改为100％100％：
原文链接：https://www.f2er.com/css/530697.html.nav-item a {
display: inline-block !important;
}
.nav-item a:after {
border-radius: 10px;
transition: all 0.3s cubic-bezier(0.19,0.22,1);
transform: scaleX(0) translate3d(0,0);
transform-origin: 100% 100%;
display: block;
height: 4px;
width: 100%;
background-color: #6cb2eb;
opacity: 1;
content: "";
}
.nav-item a:hover:after {
-webkit-transform: scaleX(1) translate3d(0,0);
-moz-transform: scaleX(1) translate3d(0,0);
transform: scaleX(1) translate3d(0,0);
}<div class="nav-item">
<a>test</a>
</div>