svg canvashtml把div弄成波浪形,css中利⽤div制作波浪
⼀般我们制作波形效果，会使⽤svg或者canvas，因为html或者css不太好实现波形效果，今天看到⼀个实现波形效果的案例，觉得思路很独特，学习了⼀下。
基础
上学的时候曾经学过，求⼀段曲线的⾯积，可以将它想象成很多个长⽅形：
随着长⽅形越来越⼩，求的⾯积将会越准确，html和css虽然不能直接绘制曲线，但是我们可以通过绘制长⽅形，来模拟曲线的效果。
基础实现
这个代码还是⽐较容易写出来的：
.g-item {
flex-grow: 1;
background-color: #000;
animation: heightChange 1s infinite ease-in-out alternate
}
.g-item:nth-child(1){
animation-delay:-.1s;
}
.g-item:nth-child(2){
animation-delay:-.2s;
}
.g-item:nth-child(3){
animation-delay:-.3s;
}
...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。