練習30天SVG之波浪效果（part7）

用SVG波形矢量图作为背景，畫一個波浪，並讓他hover時動起來。

代碼如下：

CSS

  a {
            text-decoration: none;
        }

        .svg-wave {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
            background-size: 20px auto;
        }

        .svg-wave {
            animation: waveMove 1s infinite linear;
        }

        @keyframes waveMove {
            from {
                background-position: 0 100%;
            }

            to {
                background-position: -20px 100%;
            }
        }

HTML

    <a href="javascript:" class="svg-wave">hover我（移动端按下）</a>

效果如下：