css中的挥动线

Question

我需要在css中做一个波浪线动画。

我想它是这个样子：

我的代码：

<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

检查这个答案已经在计算器上 Link to the wave

one more link

只需更改fill:none和stroke:red属性。你可以进一步玩这个。