Animação de Link com css Efeito Zig Zag

Animação de Link com css Efeito Zig Zag

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

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="zigzag">
       <a href="#" class="link"> <i class="icon icon-light-bulb"></i> Veja mais...</a>
   </div>

Vamos Adicionar o CSS

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

.zigzag a:before { 

    bottom: -50px; 
    transform-origin: left; 
}

.zigzag 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 cubic-bezier(0.175, 0.885, 0.32, 1) infinite; animation-delay:-0.25s; stroke:%235be1e5; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B 25%25%7B d:path('M 0 20 L 10 15 L 20 20 L 30 25 L 40 20 ');%0A%7D%0A50%25%7B%0Ad:path('M 0 20 L 10 25 L 20 20 L 30 15 L 40 20  ');%0A%7D%0A75%25%7B%0Ad:path('M 0 20 L 10 15 L 20 20 L 30 25 L 40 20 ');%0A%7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 20 L 10 25 L 20 20 L 30 15 L 40 20' /%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%/40px 40px repeat-x;
  animation: waving 2s linear infinite reverse;
  transform-origin: right;
}

.link {

    display: inline-block;
    position: relative;
    color: #242424;
    font-family: 'open_sansregular';
    text-decoration: none;
    font-size: 20px;
    z-index: 2;
    transition: 0.2s ease-in-out;
    margin-right: 10px;
    width: auto;

}

.link:hover { color:#5be1e5; }
 
.link:hover:before {
  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: left;
  -webkit-animation: waving 2s linear infinite;
          animation: waving 2s linear infinite;
  transform: scaleX(1);
}

@-webkit-keyframes waving {
  to {
    background-position: 80px 50%, 160px 50%;
  }
}
@keyframes waving {
  to {
    background-position: 80px 50%, 160px 50%;
  }
}

.link:before {

  content: "";
  position: absolute;
  width: 100%;
  height: 80px;
  left: 0;
  bottom: -55px;
  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:%235be1e5; 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