11

Recentemente vi essa animação feita com SVG,

inserir a descrição da imagem aqui

Mas fiquei me perguntando, será que é possível animar o text-decoration-style: wavy no :hover de forma a conseguir o mesmo resultado?

   body {
        font-family: sans-serif;
        font-size: 2rem;
    }
    p {
        font-weight: bold;
        display: inline-block;
        text-underline-position: under;
        text-decoration: underline orange;
    }
    p:hover {
        font-weight: bold;
        display: inline-block;
        text-underline-position: under;
        text-decoration-style: wavy;
    }
    
<p>Meu efeito</p> Lorem, ipsum.

OBS1: Caso vc no seu browser a propriedade text-decoration-style: wavy não apareça consulte aqui o suporte: https://caniuse.com/#search=text-decoration-style

OBS2: Documentação da Mozilla sobre o text-decoration-style: wavy https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-decoration-style#Valores

6
  • A pergunta é como deixar animado (se movendo)?
    – Costamilam
    1/11/2018 às 11:30
  • @GuilhermeCostamilam isso ai, como colocar esse underline para rodar?
    – hugocsl
    1/11/2018 às 11:47
  • 1
    @David obrigado pela edição
    – hugocsl
    1/11/2018 às 11:49
  • @hugocsl onde você pego esse gif? tem algum link pra eu da uma olhada?
    – Renan
    1/11/2018 às 12:22
  • 1
    @RenanOsorio, efeito com svg
    – David
    1/11/2018 às 12:56

3 Respostas 3

3

Fiz este código baseado neste Codepen mas só funciona perfeitamente no Firefox:

inserir a descrição da imagem aqui

Testando no Opera e no Chrome, as ondas ficam cortadas e menores em relação ao que exibe o Firefox:

inserir a descrição da imagem aqui

Ao usar esta propriedade text-underline-position: under; o código deixa de funcionar no Chrome/Opera. Me parece que estes navegadores não suportam 100% a propriedade. No Edge/IE 11 nada acontece, não há suporte. Não testei em Safari moderno.

A ideia é criar um pseudo ::after com overflow: hidden no texto e esse pseudo ter o mesmo texto transparente puxando 2x de um atributo data com o mesmo texto, e usar @keyframes para mover o pseudo para a esquerda continuamente, dando o efeito de movimento infinito:

body {
   font-family: sans-serif;
   font-size: 2rem;
}
p {
   font-weight: bold;
   display: inline-block;
   text-decoration: underline orange;
   position: relative;
   overflow: hidden;
   padding-bottom: 7px; /* só funcionou no Firefox */
   white-space: nowrap;
}

p:hover {
   text-decoration: none;
}

p::after {
   visibility: hidden;
   z-index: -1;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   content: attr(data-texto) attr(data-texto);
   color: transparent;
   text-decoration: underline;
   -webkit-text-decoration-style: wavy;
   text-decoration-style: wavy;
   -webkit-text-decoration-color: orange;
   text-decoration-color: orange;
}

p:hover::after {
   visibility: visible;
   -webkit-animation: wavy-slide 3s linear infinite;
   animation: wavy-slide 3s linear infinite;
}

@-webkit-keyframes wavy-slide {
   to {
      left: -51%;
   }
}

@keyframes wavy-slide {
   to {
      left: -51%;
   }
}
<p data-texto="Meu efeito wavy underline">Meu efeito wavy underline</p>

Limitações detectadas:

  • Só consegui o efeito esperado no Firefox, porém as ondas são maiores do que aparecerem no Chrome/Opera. Me leva a crer que não há padronização à propriedade.
  • Só serve para uma linha inteira e sem quebra de linha devido ao overflow.
2
  • 1
    Cara o resultado ficou bem legal, parece ser o caminho pena esse problema de crossbrowser
    – hugocsl
    1/11/2018 às 18:43
  • Cara postei uma resposta, não ficou perfeito tb, mas resolveu essa questão do bug no underline wavy, depois olha lá como resolvi, testei no seu código e parece que melhora o resultado tb. Coloca essa linha no seu p::after para testar depois ai background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)); mas como comentei não me pergunte pq o Chrome renderizou melhor com isso
    – hugocsl
    10/12/2018 às 14:14
2

Consegui um efeito de movimentação (bem ruimzinho), a ideia é criar um pseudo elemento que terá o mesmo conteúdo e ele sim terá o underline. Esse elemento irá esticar, dando esse leve efeito de movimento

Não é exatamente o que quer mas já da uma base para uma resposta melhor

body { margin:0; padding:0; }
p {
    position: absolute;
    left: 0;
    top: 10px;
    line-height: 2;
}
[under]::before {
    width: 100px;
    overflow: hidden;
    content: attr(under);
    color: transparent;
    position: absolute;
    text-underline-position: under;
    text-decoration: underline orange;
    text-decoration-style: wavy;
    opacity: 0;
}
[under]:hover::before {
    opacity: 1;
    animation: under 1s linear;
    animation-fill-mode: both;
}
@keyframes under {
    0% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(2);
    }
}
<p>
    <span under="Meu efeito">Meu efeito</span> Lorem, ipsum.
</p>

2
  • Conselho: coloque a opção inifinite no animation 1/11/2018 às 15:30
  • 1
    Coloca a propriedade transform-origem: bottom left; acho que pode melhorar o efeito... A ideia do pseudo elemento eh interessante mesmo
    – hugocsl
    1/11/2018 às 18:40
0

Vou postar um solução que cheguei aqui que achei interessante e resolve alguns bugs.

O principal aqui foi fazer um pequeno hake para o underline renderiza legal. Para isso precisei usar um linear-gradient transparente como background do span. Não me pergunto porque, pois descobri isso acidentalmente... Enquanto estava testando o comportamento do elemento animado eu coloquei um background-color nele e percebi que o bug parou, porém usando a cor em rgba() o problema volta, mas com um background-imagem: linear-gradiend o bug não acontece, pelo menos no Chrome!

Também precisei usar a propriedade text-underline-position: under; para corrigir esse problema no Chrome:

inserir a descrição da imagem aqui

Veja o resultado No Chrome e no FireFox

inserir a descrição da imagem aqui

Também precisei fazer um ajustes usando display:inline-block, overflow e height para controlar como a linha vai ficar cortada etc...

Segue o código usado:

div {
    font-family: sans-serif;
    font-size: 2rem;
}
div span,
div .efeito{
    display: inline-block;
    height: 60px;
    overflow: hidden;
}
div .efeito{
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: orange;
    text-underline-position: under;
    position: relative;
}
div .efeito:hover{
    text-decoration: none;
}
div .efeito::after{
    content: attr(data-text);
    width: 100%;
    color: transparent;
    position: absolute;
    top: 0;
    left: 15px;
    transition: 0s linear;
    text-decoration: none;
    text-decoration-style: none;
    text-decoration-color: orange;
    display: inline-block;
    height: 60px;
    text-underline-position: under;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0));
    z-index: -1;
}

div .efeito:hover::after {
    animation: underx 500ms infinite linear;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: orange;
}

@keyframes underx {
    to {
        left: 0px;
    }
}
<div>
    <span class="efeito" data-text="meuy texto 123">meuy texto 123</span> <span>segue conteúdo.</span>
</div>

OBS: Em fontes de tamanhos diferentes muito possivelmente será preciso ajustar os valores que estão em PX

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .