时间戳

首页 > 解决方案 > 有没有办法使用 CSS 为这个 SVG 设置渐变动画？

html - 有没有办法使用 CSS 为这个 SVG 设置渐变动画？

问题描述

所以我在 Google 上找到了这张图片，并想尝试重新创建这张图片并为​​其制作动画。我正在谈论的部分是图像左上角的紫色到粉红色渐变波。

到目前为止，我已经做到了这一点，但似乎无法让一切都按我的意愿工作。代码如下。

<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>

我无法完成的事情如下：

  1. SVG 需要填充整个 200x200 像素框，而不仅仅是顶部。
  2. 波浪需要用渐变填充。由于会有 4 个波浪以不同的速度移动，因此波浪之间的梯度可能不会混合。我不确定如何解决这个问题，因为整个事情需要看起来像 1 个动画波浪元素。也许是静态渐变？
  3. Wave SVG 需要以某种方式调整大小以使其看起来像这样。

在此处输入图像描述

标签： htmlcsssvg

解决方案

用一个矩形填充整个容器，在角度上具有线性渐变。然后你可以添加你的波浪并为它们设置动画。

如果您需要在较小的内部矩形中显示波浪，请添加另一个或使用剪切区域尺寸进行剪切。

无论哪种方式，这是一个开始：

<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>

推荐阅读