匹配css中重复线性渐变模式的开始和结束答案

【问题标题】：Matching the start and the end of a repeating-linear-gradient pattern in css匹配css中重复线性渐变模式的开始和结束
【发布时间】：2019-07-10 02:49:57
【问题描述】：

我使用 css 'repeating-linear-gradient 创建了一个带有无限斜条纹的条（你可以在下面的 sn-p 中看到），我尝试创建一个动画，它应该在水平方向滚动条纹。

几乎明白了。问题是在背景的开头和结尾，条纹图案的结尾与开头不匹配，造成图案断裂。

有没有办法让 css 在绘图区域之外重复图案，或者其他可以解决这个问题的 hack？

.progress-bar {
  width: 100px;
  height: 20px;
  background: repeating-linear-gradient(
    135deg,
    black, black 10px,
    transparent 10px, transparent 20px);
  animation: pb-animation 3s linear infinite;
}

@keyframes pb-animation { 
  0% { background-position: 0px }
  100% { background-position: 100px }
}

<div class="progress-bar">
</div>

PS：
我知道如果我在 div 中放置一个特定的宽度，我会修复它，但这无济于事，因为这种模式应该用于通用加载栏（宽度和高度将由使用上下文确定）。

【问题讨论】：

问题出在图片本身。我建议确保图像的两个边缘匹配，方法是裁剪图像，使边缘位于黑条的一半。
最快的办法是改变.progress-bar的宽度。魔法值是 width: 141px 和 background-position: 141px 为 100%。

标签： css css-animations linear-gradients

【解决方案1】：

这只是找到正确的角度和数字的问题：D 它适用于以下数量的透明。

.progress-bar {
  width: 100px;
  height: 20px;
  background: repeating-linear-gradient(
    135deg,
    black, black 10px,
    transparent 10px, transparent 14.1px);
  animation: pb-animation 3s linear infinite;
}

@keyframes pb-animation { 
  0% { background-position: 0px }
  100% { background-position: 100px }
}

<div class="progress-bar">
</div>

【讨论】：