Com CSS é possível animar o text-decoration? – css html5 css3
Pergunta:
Recentemente vi essa animação feita com SVG,
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
Autor da pergunta hugocsl
Fiz este código baseado neste Codepen mas só funciona perfeitamente no Firefox:
Testando no Opera e no Chrome, as ondas ficam cortadas e menores em relação ao que exibe o Firefox:
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.
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>Related Posts:
