Блог

Я хочу сделать этот эффект зависания от ссылок, сделать его непрерывным, чтобы не нужно было зависать, чтобы указать, что текст похож на ссылку. У меня есть этот эффект, когда при наведении курсора на нижнюю границу появляется какая-то анимация, например подчеркивание, но я хочу, чтобы этот эффект всегда был включен в цикле. Кто-нибудь, помогите мне?

 .efeitosublinhado{
  position:relative;
  text-decoration:none;
}
.efeitosublinhado2{
  position:relative;
  text-decoration:none;
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:2px;
  background-color:red;
  transition:width 0.6s cubic-bezier(0.25,1,0.5,1);
  -moz-animation:linky 2s infinite ease-in-out;
  -webkit-animation:linky 2s infinite ease-in-out;
}
@keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}
@-moz-keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}
@-webkit-keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
} 
.efeitosublinhado::before{
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:2px;
  background-color:Red;
  transition:width 0.6s cubic-bezier(0.25,1,0.5,1);
}
.efeitosublinhado:hover::before{
  background-color:red;
  left:0;
  right:auto;
  width:100%;
}

<a href="WWW.google.pt" class="T3Cefeitosublinhado"> this text will border bottom effect </a>
 

Попробуйте установить анимацию в before :

 .efeitosublinhado{
  position:relative;
  text-decoration:none;
}

@keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}
@-moz-keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}
 @-webkit-keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
} 
.efeitosublinhado::before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:auto;
  width:0;
  height:2px;
  background-color:red;
  transition:width 0.6s cubic-bezier(0.25,1,0.5,1);
  -moz-animation:linky 2s infinite ease-in-out;
  -webkit-animation:linky 2s infinite ease-in-out;
  animation:linky 2s infinite ease-in-out;
} 

 <a href="WWW.google.pt" class="efeitosublinhado"> this text will border bottom effect </a>