所以我发现this https://i.pinimg.com/originals/4b/c7/68/4bc7687858221c6b60d7b02fe0740670.png在 Google 上搜索了一个图像，并想尝试重新创建该图形并将其动画化。我所说的部分是图像左上角的紫色到粉色渐变波。
到目前为止我已经做了this https://codepen.io/sweatycubes/pen/ExamPVb但似乎无法让一切按我想要的方式工作。代码如下。
<div id='container'>
<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='wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' />
</defs>
<g class='parallax'>
<use xlink:href='#wave' x='48' y='0' fill='rgba(255, 255, 255, 0.7' />
<use xlink:href='#wave' x='48' y='3' fill='rgba(255, 255, 255, 0.5)' />
<use xlink:href='#wave' x='48' y='5' fill='rgba(255, 255, 255, 0.3)' />
<use xlink:href='#wave' x='48' y='7' fill='#ffffff' />
</g>
</svg>
</div>
我无法完成的事情如下：
- SVG 需要填充整个 200x200 像素框，而不仅仅是顶部。
- 波浪需要填充渐变。由于会有 4 个波以不同的速度移动，因此梯度可能不会在波之间混合。我不确定如何解决这个问题，因为整个事情需要看起来像 1 个动画波浪元素。也许是静态渐变？
- 波浪 SVG 需要以某种方式调整大小，看起来像这样。
用一个矩形填充整个容器，并在一定角度上具有线性渐变。然后您可以添加波浪并为其设置动画。
如果您需要在较小的内部矩形中显示波浪，请添加另一个矩形或使用具有剪裁区域尺寸的剪裁。
不管怎样，这是一个开始：
<div id='container' style="width: 200px; height: 200px">
<svg class='waves' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 200 200' preserveAspectRatio='none' shape-rendering='auto'>
<defs>
<path id='wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' />
<linearGradient id="gradient1" x1="1" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#E863BA" />
<stop offset="100" stop-color="#211D2F" />
</linearGradient>
</defs>
<rect x="0" y="0" width="200" height="200" fill="url(#gradient1)"></rect>
<g class='parallax'>
<use xlink:href='#wave' x='48' y='140' fill='rgba(255, 255, 255, 0.7)' />
<use xlink:href='#wave' x='48' y='143' fill='rgba(255, 255, 255, 0.5)' />
<use xlink:href='#wave' x='48' y='145' fill='rgba(255, 255, 255, 0.3)' />
<use xlink:href='#wave' x='48' y='147' fill='rgba(255, 255, 255, 0.1)' />
</g>
</svg>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
