Winken Linie in CSS

Question

Ich brauche eine Wellenlinie Animation in CSS.

Ich möchte es so etwas wie folgt aussehen:

Mein Code:

<div class="wrapper"> 
    <div class="line"></div> 
</div> 

.wrapper { 
    width: 100%; 
    height: 500px; 
    background: #fff; 
    float: left; 
    position: relative; 
} 

.line { 
    width: 100%; 
    height: 2px; 
    background: url('http://tiny .pl/gjhxv') left top repeat-x; 
    position: absolute; 
    top: 50%; 
    left: 0; 
} 

https://jsfiddle.net/agxx3ysk/

Answer 1

prüfen diese Antwort bereits auf Stackoverflow Link to the wave

one more link

Ändern Sie einfach fill:none und stroke:red Eigenschaften. und du könntest weiter damit spielen.