在 CSS 中创建多层 SVG 波形 [英] Creating multi-layered SVG waves in CSS

问题描述

我正在尝试在网站上创建波浪效果 像这样，其中有一个主色波(深紫色)，然后是沿边缘的浅色波.我尝试使用 CSS position 和 top 定位多个路径，但无法让它们工作.

I am trying to create a wave effect on a website like this where there is a main color wave (dark purple) and then lighter colored waves along the edge. I have tried positioning multiple paths with CSS position and top but cannot get them to work.

这是我的基本波:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path class="green" fill="#0b5b41" fill-opacity="1" d="M0,224L60,213.3C120,203,240,181,360,186.7C480,192,600,224,720,245.3C840,267,960,277,1080,250.7C1200,224,1320,160,1380,128L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>

推荐答案

Mybe so

三个独立的波浪.可以根据自己的喜好选择每个波浪的颜色.

Three separate waves. The color of each wave can be selected to your liking.

该应用具有响应性并且在所有现代浏览器中看起来都一样

The app is responsive and looks the same in all modern browsers

.w1 {
fill:#0E7452;
opacity:0.4;
}
.w2 {
fill:#0E7452;
opacity:0.7;
}
.w3 {
fill:#0B5B41;
}

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1440 320" version="1.1">
  <path class="w1"  d="m-1.2 155.9c0 0 45.8-1.8 68.7-0.8 96.9 4.3 213.1 15.7 289.6 28.9 120 19 241.7 41.5 361.7 62.8 120 21.7 269.8 29.2 389.8 2.9C1228.6 222.9 1320 108 1380 76l60-32v224l-60 52-293-1.1H734L363.5 317.2 75.8 322.4 0 268c0 0-1.2-81.2-1.2-112.1z"/>
  
  <path class="w2"   d="m-1.2 186.8c0 0 45-1.1 67.5-2 190.8-7.9 184.4-4 297.5 2 120 5.3 241.2 42.3 361.2 63.6 120 21.7 245 23 365-3.3 120-26.7 194-95.4 290.1-145.1 20.1-10.4 60-32 60-32V294H1380 1080 720 360 60 0Z" />

  <path class="w3" d="M0 224 60 213.3C120 203 228.9 182.5 348.9 188.2 468.9 193.5 600 224 720 245.3 840 267 960 277 1080 250.7 1200 224 1320 160 1380 128l60-32V320H1380 1080 720 360 60 0Z" />
</svg>

这篇关于在 CSS 中创建多层 SVG 波形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！