Animação de link sublinhado Com Css Efeito Flecha
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!
Deixe um comentário