html - 移动条纹适用于背景图像但不适用于背景渐变

Question

我的代码与 background-image 完美配合，但我想删除图像并使用完全相同的代码并在使用渐变时保持完全相同的功能(使用 background) 而不是图片。

这是我的代码(片段):

.gangina {
  /*background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);*/
  background-image: url("http://s1.directupload.net/images/130503/xo29uiim.png");
  background-position: 0 0;
  border: 1px solid #ccc;
  display: block;
  height: 30px;
  width: 150px;
}
.hezi {
  -moz-animation: hezi 4s infinite linear;
  -ms-animation: hezi 4s infinite linear;
  -o-animation: hezi 4s infinite linear;
  -webkit-animation: hezi 4s infinite linear;
  animation: hezi 4s infinite linear;
}
@keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@-moz-keyframes hezi {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@-webkit-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@-ms-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@-o-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

<div class="gangina hezi"></div>

但我不想依赖图像，因此我想删除背景图像并使用如下代码中的渐变:

background:repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px);

此处需要进行一些小调整，以使动画与 background 属性和渐变一起工作。

Answer 1

重复线性渐变通常需要设置 background-size 属性才能使动画正常工作。

对于这种情况，您可以设置 background-size: 28px 100%; 并且动画效果很好(引用下面的代码片段)。

.gangina {
  background: -webkit-repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
  background: -moz-repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);  
  background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
  background-position: 0 0;
  background-size: 28px 100%;
  border: 1px solid #ccc;
  display: block;
  height: 30px;
  width: 150px;
}
.hezi {
  -moz-animation: hezi 0.8s infinite linear;
  -ms-animation: hezi 0.8s infinite linear;
  -o-animation: hezi 0.8s infinite linear;
  -webkit-animation: hezi 0.8s infinite linear;
  animation: hezi 0.8s infinite linear;
}
@keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -28px 0;
  }
}
@-moz-keyframes hezi {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -28px 0;
  }
}
@-webkit-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -28px 0;
  }
}
@-ms-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -28px 0;
  }
}
@-o-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -28px 0;
  }
}

<div class="gangina hezi"></div>