css 波浪动画

最新推荐文章于 2024-08-06 15:26:56 发布

一行代码七个报错

最新推荐文章于 2024-08-06 15:26:56 发布

阅读量752

点赞数 1

文章标签： css 动画 css3

本文链接：https://blog.csdn.net/m0_61084402/article/details/124608768

版权

本文介绍了如何使用CSS创建波浪动画效果，包括关键的CSS代码段，虽然SVG不熟悉，但通过前端技巧实现了波浪动画。

摘要由CSDN通过智能技术生成

记录一下今天学到的css波浪动画效果

波浪主体代码

<div class="wavesDIV" style="display: block;">

        <svg class="waves" xmlns="http://www.w3.org/2000/svg" 
             xmlns:xlink="http://www.w3.org/1999/xlink" 
             viewBox="0 24 150 28" 
             preserveAspectRatio="none" 
             shape-rendering="auto">

            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125, 191, 185,0.3)