css中波浪动画从左到右的转换

Question

嗨，伙计们，我正试图通过在这里使用svg在css中制作波浪动画，大多数事情都很好，但我确实有一个问题，一旦波浪到达终点，它会突然重新开始，并且这种差异是明显可见的，我想让过渡变得平滑，以获得更好的ui，这样对用户来说，波浪似乎是无尽的。

请查看下面的片段以了解我的问题感谢

.wave {
background: url(https://gist.githubusercontent.com/ratnabh/da8213a27700e0e1c2d1c81961070f6f/raw/3608a5072f4e392b852e5cc3c244841025b32c81/wave1.svg) repeat-x; 
position: absolute;
opacity:0.2;
bottom: 0px;
width: 2000px;
height: 198px;
animation: wave 2s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1000px;
}
}

<div class="wave"></div>

Answer 1

这可能会解决问题

如图所示，起点和终点的高度相同。

因此，我将wavediv的宽度增加到图像的两倍。并将div移动到图像的CCD_ 2的端点以去除波动。

body{overflow:hidden;}
.wave {
background: url(https://gist.githubusercontent.com/ratnabh/da8213a27700e0e1c2d1c81961070f6f/raw/3608a5072f4e392b852e5cc3c244841025b32c81/wave1.svg) repeat-x; 
position: absolute;
opacity:0.2;
bottom: 0px;
width: 3840px;
height: 198px;
animation: wave 4s linear infinite;
transform: translate3d(0, 0, 0);

}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1920px;
}
}

<div class="wave"></div>

Answer 2

此逻辑将起作用。但是，您必须对SVG进行处理，以匹配起点和终点。

.wave {
background: url(https://gist.githubusercontent.com/ratnabh/da8213a27700e0e1c2d1c81961070f6f/raw/3608a5072f4e392b852e5cc3c244841025b32c81/wave1.svg) repeat-x; 
position: absolute;
opacity:0.2;
bottom: 0px;
width: 2000px;
height: 198px;
animation: wave 2s cubic-bezier( 0.36, 0.36, 0.36, 0.36) infinite;
transform: translate3d(0, 0, 0);
}
@keyframes wave {
0% {
background-position: 0 0;
}
100% {
background-position: 5000% 0; 
}
}

<div class="wave"></div>

Answer 3

如上所述，最好的方法是直接调整SVG文件，使其具有匹配的起点和终点。

@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1920px;
}
}
.wave {
background: url("https://raw.githubusercontent.com/scottgriv/River-Charts/main/static/assets/wave.svg") repeat-x;
position: absolute;
bottom: 0;
width: 3840px;
height: 198px;
opacity: 1;
animation: wave 4s linear infinite;
transform: translate3d(0, 0, 0);
}

<div class="wave"></div>

要调整SVG路径中的起点和终点，请在代码编辑器中打开SVG文件以查看XML。可以修改<path>元素的d属性。

示例：

您的原始SVG：

<path d="M0,0 C135.180854,0 182.771453,50 352.112272,50 C476.394096,50 557.790605,19.606846 751.782984,19.606846 C945.775364,19.606846 984.663736,50 1111.36509,50 C1375.56035,50 1635.95781,0 1920,0 L1920,200 L0,200 L0,0 Z" id="Rectangle" fill="#D8F5EA" fill-rule="nonzero"></path>

修改后的SVG(经过简化调整(：

<path d="M0,0 C240,0 240,50 480,50 C720,50 720,0 960,0 C1200,0 1200,50 1440,50 C1680,50 1680,0 1920,0 L1920,200 L0,200 L0,0 Z" id="Rectangle" fill="#D8F5EA" fill-rule="evenodd"></path>

• 原始SVG有多个控制点(C命令(来定义路径中的曲线。在修改后的SVG中，我通过调整控制点的坐标来简化这些曲线，同时保持相同的控制点数量。

• 我还将"1元素"的CCD_；非零"；至"；偶数"；。这决定了路径在自身重叠的情况下如何填充。

• 也可以通过调整<path>元素的fill属性来随意更改填充颜色。

完全修改的SVG XML：

<svg width="1920px" height="200px" viewBox="0 0 1920 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>2/1@svg</title>
<g id="2/1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M0,0 C240,0 240,50 480,50 C720,50 720,0 960,0 C1200,0 1200,50 1440,50 C1680,50 1680,0 1920,0 L1920,200 L0,200 L0,0 Z" id="Rectangle" fill="#D8F5EA" fill-rule="evenodd"></path>
</g>
</svg>