本篇文章通过代码实例给大家介绍一下svg+css3实现动感的波浪效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

一根矢量的波浪

<svg>
    <use></use></svg><svg>
    <path></path>
    <path></path>
    <path></path>
    <path></path></svg>

完整代码：

HTML5炫酷粒子动画导航菜单特效

HTML5炫酷粒子动画导航菜单特效是一款导航菜单采用鼠标悬停变色的特效。

下载

nbsp;html>



    <meta>
    <meta>
    <div>
        <div>
            <div>
                <div>
                    <svg>
                        <path>
                        </path>
                        <path>
                        </path>
                        <path>
                        </path>
                        <path>
                        </path>
                    </svg>
                    <svg>
                        <path>
                        </path>
                        <path>
                        </path>
                        <path>
                        </path>
                        <path>
                        </path>
                    </svg>
                </div>
            </div>
        </div>
    </div>


    <style>
        .circle-countdown {
            width: 441px;
            height: 441px;
            position: relative;
            top: 0;
            left: 0;
            padding: 2.5rem;
            border: 1px solid #fb64b6;
            border-radius: 50%;
            overflow: hidden;
        }

        .wave-animation {
            overflow: hidden;
        }


        .wave-animation__percent {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 3;
            width: 100%;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 64px;
        }

        .wave-animation__water {
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            /* 调整这里的60%就可以改变进度，波浪高低 */
            transform: translate(0, calc(100% - 60%));
            background: #f852d6;
            transition: all 2s;
        }

        .wave-animation__water-wave {
            width: 200%;
            position: absolute;
            bottom: 100%;


        }

        .wave-animation__water-wave--back {
            right: 0;
            fill: #1d1d1d;
            animation: wave-back 1.4s infinite linear;
        }

        .wave-animation__water-wave--front {
            left: 0;
            fill: #f852d6;
            margin-bottom: -1px;
            animation: wave-front 0.7s infinite linear;
        }

        @keyframes wave-front {
            100% {
                transform: translate(-50%, 0);
            }
        }

        @keyframes wave-back {
            100% {
                transform: translate(50%, 0);
            }
        }
    </style>

效果图：

更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！