如何使用 svg 作为背景获得无缝视差效果而不重置动画？答案

【问题标题】：How to get a seamless parallax effect using svg as a background and not reset the animation?如何使用 svg 作为背景获得无缝视差效果而不重置动画？
【发布时间】：2022-04-14 06:56:18
【问题描述】：

设置

设置有三层（svgs 作为 div 的背景），都比父 div 宽，可以剪掉指定高度和宽度之外的任何东西。

* {
    margin:0; padding: 0;
    box-sizing: border-box;
    color: initial;
    font-size: 16px;
    font-family: 'Comfortaa', cursive;
    scrollbar-width: none;
}

body {
    background-color: rgb(252, 241,239);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#background {
    position: relative;

    background:rgb(164, 225, 240);
    width: 950px;
    height: 555px;
}

#clouds {
    position: absolute;
    top: 0;
    left: 0;
    background: url(https://drive.google.com/file/d/1Fln0gmJAJ1ojQNnUd6W88I5WYSorByPd/view?usp=sharing);
    width: 950px;
    height: 555px;
    animation: foreground 60s -5s linear infinite;
    background-size: cover;
}

#mountains {
    position: absolute;
    top: 0;
    left: 0;
    background: url(https://drive.google.com/file/d/1DcRrXpp90tfpTCu-28GKAAaLwMyAt-wU/view?usp=sharing);
    width: 950px;
    height: 555px;
    animation: foreground 20s -5s linear infinite;
    background-size: cover;
}

#foreground {
    position: absolute;
    top: 0;
    left: 0;
    background: url(https://drive.google.com/file/d/1pxFkNiXqu3lYwRyx7s6unQmgKVwMgAbu/view?usp=sharing);
    width: 950px;
    height: 555px;
    animation: foreground 3s -5s linear infinite;
    background-size: cover;
}

@keyframes foreground {
    100% {
        background-position: -2550px 0px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>parallax</title>
</head>
<body>
    <div id="background">
        <div id="clouds"></div>
        <div id="mountains"></div>
        <div id="foreground"></div>
    </div>
</body>
</html>

*svgs 没有加载我知道

问题

在动画持续时间结束时，它会重置到其初始位置并且不会无缝循环。

这就是 svg 的原生外观。

我错过了什么？

【问题讨论】：

我确实简要地查看了这个，但 sn-p 不完整，因为 cloud.svg、mountain.svg 和foreground.svg 都丢失了。
查看此链接：developer.mozilla.org/en-US/docs/Web/CSS/… .... 我猜部分问题可能是 -5s。
您也可以在此处添加 svg 代码。 html接受它。我们会更容易找到您的问题的解决方案。

标签： html css animation svg background-position

【解决方案1】：

问题是因为您的 mountain.svg 是 2558 像素宽，而其他两个是 2550 像素，根据您的前景关键帧规范。您可以调整 svg 的大小或仅为山脉创建另一个关键帧。

【讨论】：