CSS3 svg 波浪效果

最新推荐文章于 2024-07-23 18:13:11 发布

原创最新推荐文章于 2024-07-23 18:13:11 发布 · 536 阅读

1 ·

CC 4.0 BY-SA版权

CSS3 同时被 2 个专栏收录

11 篇文章

订阅专栏

Canvas+Svg创建动画

2 篇文章

订阅专栏

这篇博客探讨了SVG中的<svg>元素和<use>标签如何用于创建动态图形，如波浪效果。通过调整`xlink:href`和`y`属性，实现了不同透明度的叠加，增强了网页的视觉体验。

<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="0" fill="rgba(255,255,255,0.7"></use>
        <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use>
        <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use>
        <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use>
    </g>
</svg>