Question

我使用css的repeating-linear-gradient创建了一个带有无限对角线条纹的条（您可以在下面的代码段中看到），并且尝试创建动画，它应该沿水平方向滚动条纹。

差不多了。问题在于背景的开始和结束，条纹图案的末端与开始位置不匹配，从而导致图案损坏。

有没有办法让CSS在绘图区域之外重复图案，或者其他可以解决此问题的技巧？

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

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

在CSS

1 个答案: