我在互联网上发现了此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％：
.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>
