Um mit CSS einen Welleneffekt zu erstellen, kann man Keyframes und Animationen verwenden. Hier ist ein einfacher Code, der einen Welleneffekt mit CSS erstellt.
1. Zuerst müssen Sie die HTML-Struktur erstellen:
```html
2. Dann fügen Sie diesen CSS-Code hinzu:
```css
.wave {
position: relative;
height: 70px;
width: 600px;
background: #ffffff;
overflow: hidden;
}
.wave:before {
content: “”;
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 180px;
background-color: blue;
right: -5px;
bottom: 0;
animation: wave 3s cubic-bezier( 0.25, 0.46, 0.45, 0.94) infinite;
z-index: 1;
transform: rotate(0deg);
}
@keyframes wave {
0% {
height: 180px;
transform: rotate(0deg);
}
50% {
height: 140px;
transform: rotate(180deg);
}
100% {
height: 180px;
transform: rotate(360deg);
}
}
```
Bitte stellen Sie sicher, dass Sie den Code an Ihre Bedürfnisse anpassen. Zum Beispiel möchten Sie vielleicht die Farben oder die Größe der Welle ändern.
Dieser Code erstellt einen einfachen Welleneffekt, der ständig spielt. Der Welleneffekt wird erstellt, indem die Form einer Farbbox mit einer Rundung an den Rändern geändert wird. Dann wird sie verschoben und gedreht, um den Eindruck einer Welle zu erzeugen.
Man kann diesen Effekt erweitern und verfeinern, je nachdem, wie komplex man es haben möchte.
