Crear un efecto de onda con CSS puede ser un poco complicado, pero con el CSS3 puedes lograrlo. A continuación, te presento un ejemplo para crear un efecto de onda con CSS usando animaciones y gradientes.
```css
@keyframes wave {
0%, 100% {
transform: translate3d(-90px, 0, 0);
}
50% {
transform: translate3d(85px, 0, 0);
}
}
body {
overflow: hidden;
background: #013b47;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.onda {
position: relative;
width: 440px;
height: 240px;
overflow: hidden;
}
.onda:before {
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
linear-gradient(transparent 50%, #000 50%),
linear-gradient(to right, cyan, blue);
transform: rotate(180deg);
animation: wave 2s linear infinite;
}
```
Este código crea un efecto de “onda de agua” utilizando una animación CSS que mueve un gradiente de izquierda a derecha. Esta es solo una forma de hacerlo, hay muchas otras posibles con CSS3, ya que permite una gran flexibilidad en la creación de efectos de animación.
