css动画重复剪切图像答案

【问题标题】：css animation repeat cuts the imagecss动画重复剪切图像
【发布时间】：2021-07-28 05:55:46
【问题描述】：

我想在我的网站主页上创建一些 css 动画，并带有一些笔记。这是示例：~~http://labandallonnaise.org/joomla/~~（链接不再演示行为）我们可以看到音符正在下降，那么在下一个序列之前我们什么都没有。

这里是代码

.notes-wrapper {
    overflow: hidden;    
    height: 630px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin-top: -75px;
    margin-bottom: -75px;
    margin-left: -500px;
    margin-right: -500px;
}

.notes {
    background: url("gantry-theme://custom/images/background.svg") center !important;
    height: 6300px;
    animation: fall 10s linear infinite;
    overflow: hidden;
    z-index: 0;
    background-repeat: repeat;
    background-size: cover;
    top: 0px;
}

.notes img {
    animation: none;
    background: transparent;
}

@keyframes fall {
    0% {
        transform: translateY(-1050px);
    }   
}

<div class="notes-wrapper"> 
  <img style="display: block; margin-left: auto; margin-right: auto; animation: none; background: transparent;" src="images/logo/BandAllonnaisedudule.png" alt="" />
  <div class="notes"> </div>
</div>

我怎样才能有连续的动画？

【问题讨论】：

您可以尝试将animation-iteration-count: infinite; 添加到 .notes 选择器吗？
不幸的是它没有帮助
我更新了网站并停止了动画，因为这正在修改标题显示（如果没有响应问题，我无法设置固定位置）

标签： html css sass css-animations

【解决方案1】：

这取决于你想要的各种视口纵横比的效果。

无论细节如何，您都需要 SVG 的两份副本，这样当一个已到达底部并重新开始时，您就不会出现间隙。

这是获得连续性的一种方法，它将伪元素前后放置在 notes div 上，这两种元素都会在视口的整个高度上进行动画处理。一个从视口开始，另一个在视口上方。

这是一种简单的方法，因为它不需要您了解有关背景图像的纵横比的任何信息。根据您希望在窄或宽设备上发生的情况，可以获得更好的控制并产生不同的结果。例如，音符是否应该始终完全水平放置，不管它们有多小？无论设备有多宽，是否总是只有一个背景副本等等。

.notes-wrapper {
    overflow: hidden;
    position: relative;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
}
.notes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}  

.notes::before, .notes::after {
    content: '';
    background-image: url("https://ahweb.org.uk/background.svg");
    position: absolute;
    height: 100%;
    width: 100%;
    animation: fall 10s linear infinite;
    overflow: hidden;
    z-index: -1;
    background-repeat: repeat no-repeat;
    background-size: auto 100%;
    background-position: center;
}
.notes::before {
  top: -100%;
}
.notes::after {
  top: 0;
  }

@keyframes fall {
    100% {
        transform: translateY(100vh);
    }   
}

<div class="notes-wrapper"> 
  <img style="display: block; margin-left: auto; margin-right: auto; animation: none; background: transparent;" src="images/logo/BandAllonnaisedudule.png" alt="" />
  <div class="notes"></div>
</div>

【讨论】：