En este artículo, se implementa un texto animado ondulado utilizando HTML y CSS. Es uno de los efectos CSS más simples. Para un principiante, es uno de los mejores ejemplos para aprender el concepto de pseudoelementos CSS.
Enfoque: la idea básica de obtener textos ondulados se realiza mediante la combinación de algunos atributos CSS. La parte principal del «cuerpo» se crea usando la etiqueta <span> dentro de la etiqueta <body>. El código CSS se utiliza para crear textos ondulados de la parte del «cuerpo» de la estructura HTML.
Código HTML: el siguiente fragmento de código demuestra el diseño del texto utilizado para el efecto ondulado mediante el uso de etiquetas HTML en la página web.
<div class="wavy"> <span style="--i:1">G</span> <span style="--i:2">E</span> <span style="--i:3">E</span> <span style="--i:4">K</span> <span style="--i:5">S</span> <span style="--i:6"> </span> <span style="--i:7">F</span> <span style="--i:8">O</span> <span style="--i:9">R</span> <span style="--i:10"> </span> <span style="--i:11">G</span> <span style="--i:12">E</span> <span style="--i:13">E</span> <span style="--i:14">K</span> <span style="--i:15">S</span> <span style="--i:16">.</span> <span style="--i:17">.</span> <span style="--i:18">.</span> <span style="--i:19">.</span> <span style="--i:20">.</span> </div>
Código final: este ejemplo muestra el código completo para hacer una línea de texto ondulada vertical usando HTML y CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(6, 75, 21);
}
.wavy {
position: relative;
}
.wavy span {
position: relative;
display: inline-block;
color: #fff;
font-size: 2em;
text-transform: uppercase;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-20px);
}
40%,
100% {
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="wavy">
<span style="--i:1">G</span>
<span style="--i:2">E</span>
<span style="--i:3">E</span>
<span style="--i:4">K</span>
<span style="--i:5">S</span>
<span style="--i:6"> </span>
<span style="--i:7">F</span>
<span style="--i:8">O</span>
<span style="--i:9">R</span>
<span style="--i:10"> </span>
<span style="--i:11">G</span>
<span style="--i:12">E</span>
<span style="--i:13">E</span>
<span style="--i:14">K</span>
<span style="--i:15">S</span>
<span style="--i:16">.</span>
<span style="--i:17">.</span>
<span style="--i:18">.</span>
<span style="--i:19">.</span>
<span style="--i:20">.</span>
</div>
</body>
</html>
Producción:
