使用CSS实现一个波浪效果

代码实现

先来看一下最终效果：http://code.wubin.work/code/css/bolang/

注意：该效果只能在服务器环境下生效。

HTML

<div class="dabolang">
            <div id="dabolangl1" class="dabolangl"></div>
            <div id="dabolangl2" class="dabolangl"></div>
            <div id="dabolangl3" class="dabolangl"></div>
</div>

CSS

/*栏目波浪*/
    .dabolang {
        width: 100%;
        height: 20px;
        position: relative;
        overflow: hidden;
        z-index: 1;
        background-color: #fff0 !important;
        margin-top: -19px;
    }
    .ripro-dark .dabolang {
        width: 100%;
        height: 20px;
        position: relative;
        overflow: hidden;
        z-index: 1;
    background-color:#181616 !important
    }
    #dabolangl1 {
        -webkit-mask: url(zhankr_001.svg);
        mask: url(zhankr_001.svg);
        animation-delay: -2s;
        animation-duration: 12s;
    }
    #dabolangl1, #dabolangl2, #dabolangl3 {
        background-color: rgb(246,246,246)
    }
    .ripro-dark #dabolangl1{
        background-color: #f1f1f1!important;
    }
    .ripro-dark  #dabolangl2{
        background-color: #f1f1f1!important;
    }
    .ripro-dark  #dabolangl3{
        background-color: #f1f1f1!important;
    }
    .dabolangl {
        width: 200%;
        height: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        background-repeat: repeat-x;
        background-position: left bottom;
        background-size: 350px 100%;
        transform-origin: 0 100% 0;
        animation-name: move;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    @keyframes move{0%{transform:translate(-175px,0px) scale(1,1)}50%{transform:translate(-87px,0px) scale(1,0.5)}100%{transform:translate(0px,0px) scale(1,1)}}

    #dabolangl2 {
        -webkit-mask: url(zhankr_002.svg);
        mask: url(zhankr_002.svg);
        animation-delay: -2s;
        animation-duration: 5s;
    }
    #dabolangl3 {
        -webkit-mask: url(zhankr_003.svg);
        mask: url(zhankr_003.svg);
        animation-delay: -1s;
        animation-duration: 3s;
    }
/*栏目波浪*/

所需的图片请下方下载。

http://code.wubin.work/code/css/bolang/zhankr_003.svg

http://code.wubin.work/code/css/bolang/zhankr_002.svg

http://code.wubin.work/code/css/bolang/zhankr_001.svg