css3实现波浪进度 |css设置div可拖动

<div class="wave">
<div class="wave-bg"></div>
<div class="wave-progress"></div>
</div>

首先，大家需要用一个div来容纳整个波浪进度条，内部需要再嵌套两个div，一个是波浪背景，一个是波浪进度。

.wave {
position: relative;
height: 200px;
width: 100%;
}
.wave-bg {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #ccc;
}
.wave-progress {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #00BFFF;
clip-path: url(#wavy);
}

接下来大家来写样式。首先大家需要为波浪容器和两个子元素设置position和height、width属性。然后大家为波浪背景设置背景颜色，为波浪进度设置背景颜色，并且大家使用了clip-path属性实现了波浪的遮罩，这个属性可以控制展示的形状。

<svg viewBox="0 0 500 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="wavy">
<path fill="none" d="M0 25 l30 -25
c10 0 10 50 30 50
c20 0 20 -50 30 -50
c10 0 10 50 30 50
c20 0 20 -50 30 -50
c10 0 10 50 30 50
c20 0 20 -50 30 -50
c10 0 10 50 30 50
c20 0 20 -50 30 -50
V 150 H 0 Z" />
</clipPath>
</defs>
</svg>

最后大家使用SVG建立几何路径来表示大家的波浪形状。大家的路径按顺序定义了几个点，根据这些点画了一条曲线。大家使用clipPath属性来绑定这个路径，并且在波浪进度的div上使用了clip-path属性来使用这个路径作为大家的遮罩。

到此为止，大家就完成了CSS3实现波浪进度的代码设置，不过在真正使用时，大家可能还需要根据实际情况进行一些微调。