鼠标hover时,下划线从中间向两侧运动

鼠标hover时,下划线从中间向两侧运动

CSS实现:

/* Underline From Center */
.te-underline-from-center {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: perspective(1px) translateZ(0);
   transform: perspective(1px) translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   position: relative;
   overflow: hidden;
}
.te-underline-from-center:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: 51%;
   right: 51%;
   bottom: 0;
   background: #2563eb;
   height: 3px;
   -webkit-transition-property: left, right;
   transition-property: left, right;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
}
.te-underline-from-center:hover:before, .te-underline-from-center:focus:before, .te-underline-from-center:active:before {
   left: 0;
   right: 0;
}

参考资料:

posted @ 2022-01-12 20:37  Marhey  阅读(107)  评论(0)    收藏  举报