Carregando...

Animação de link sublinhado Com Css Efeito Flecha

Postado: 10 de outubro de 2022

Animação de link sublinhado Com Css Efeito Flecha

Este tutorial mostra como criar uma animação de link com efeito flecha.

Nesta seção, projetaremos uma estrutura simples na tag <div>. 

temos dentro da tag <div> as tag <a>.

Essas tags usaremos para criar a nossa animação de link.

Vamos Adicionar o HTML:

      <div class="flecha">
           <a href="#" class="link"> <i class="icon icon-arrow-right-3"></i> Arrow</a>
      </div>

      <div class="flecha">
           <a href="#" class="link"> <i class="icon icon-arrow-right-3"></i> Oliver Queen</a>
      </div>

      <div class="flecha">
          <a href="#" class="link"> <i class="icon icon-arrow-right-3"></i> Arqueiro</a>
      </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso Link com animação de Flecha.

.flecha a:before {

  transform-origin: right;
  width: calc(100% + 25px);

}

.flecha a:hover:before {

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 2s linear infinite; animation-delay:0s; stroke:%2359d4da; stroke-width:2; stroke-dashoffset:0px; stroke-dasharray:80px; stroke-linecap:round; fill:%23ffffff; %7D @keyframes wave%7B 25%25%7B stroke-dashoffset:-80px; %7D 50%25%7B stroke-dashoffset:-80px; %7D 100%25%7B stroke-dashoffset:-160px; %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath class='wave' d='M 0 40 L 50 40 L 80 40 L 54 44 L 54 36 L 80 40 ' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") calc(100% - 10px) 50%/40px 80px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%2359d4da; stroke-width:2; stroke-linecap:round; %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 40 40 40 Q 60 40 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 50%/calc(100% - 25px) 80px no-repeat;
  -webkit-animation: none;
          animation: none;
  transform-origin: left;

}

.link {

  display: inline-block;
  margin: 20px 0;
  position: relative;
  color: #3b3b3b;
  font-family: "Futura";
  text-decoration: none;
  font-size: 22px;
  z-index: 2;
  transition: 0.2s ease-in-out;

}

.link:hover { color: #59d4da; }

.link:hover:before {

  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: left;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-0.25s; stroke:%23e0ff00; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 50%/80px 80px repeat-x;
  -webkit-animation: waving 3s linear infinite;
          animation: waving 3s linear infinite;
  transform: scaleX(1);
}

.link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 80px;
  left: 0;
  bottom: -45px;
  z-index: -1;
  transform: scaleX(0);
  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1);
  transform-origin: right;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%2359d4da; stroke-width:2; stroke-linecap:square; %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 40 40 40 Q 60 40 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 50%/80px 80px repeat-x;
}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

916 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados