Ecco un esempio di come creare un effetto onda con i CSS. L’effetto onda può essere realizzato utilizzando le proprietà di animazione e dei keyframes di CSS.
HTML:
```
CSS:
```
.wave {
position: relative;
height: 70px;
width: 600px;
background: #ffffff;
}
.wave:before {
content: “”;
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: blue;
right: -5px;
top: 40px;
transform: rotate(0deg);
transform-origin: 50% 50%;
animation: wave 3s infinite linear;
}
keyframes wave {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
```
In questo esempio, la chiave CSS `keyframes` viene utilizzata per creare l’animazione. L’animazione viene chiamata `wave` e ruota un div a forma di semicerchio da 0 a 360 gradi, dando l’illusione di un’onda che si muove.
Nota: Puoi cambiare i colori, la dimensione dell’onda e la durata dell’animazione in base alle tue esigenze.
