svg和css实现波浪动效

前言

参考网址
这样的需求效果在实际的应用中还是蛮常见的。

  • 效果 gif 图

源码

  • html github 地址
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>svg + css 实现波浪</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }

    body {
    background: linear-gradient(135deg, #df5f99 0%, #492bab 100%);
    padding: 50px 0 0;
    }

    .waves {
    background: #00f;
    width: 100%;
    background: 0 0;
    position: relative;
    height: 32px;
    margin-top: 0;
    margin-bottom: -4px
    }

    .wave {
    position: absolute;
    fill: #fff;
    stroke: #fff;
    stroke-opacity: .5;
    stroke-width: 2px;
    animation: slide 10s linear infinite;
    animation-delay: 0s;
    bottom: 0
    }

    .white-bg{
    height: 500px;
    background-color: #fff;
    }

    @keyframes slide {
    0% {
    transform: translateX(0)
    }

    to {
    transform: translateX(-2000px)
    }
    }
    </style>
    </head>

    <body>
    <svg class="waves">
    <path class="wave" d="M0,16 q500,32 1000,0 t1000,0 t1000,0 t1000,0 V32 H-16 z"></path>
    </svg>
    <div class="white-bg"></div>
    </body>

    </html>
坚持原创,坚持做个好人!