找到你要的答案

Q:Moving stripes working with background image but not with background gradients

Q:移动条纹与背景图像,但不与背景梯度

My code is working perfectly with background-image but I want to remove the image and use the same exact code and keep the same exact functionality while using gradients (with background) instead of an image.

Here is my code (snippet):

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

But I don't want to rely on image therefore I want to remove the background image and use gradients like in the code below:

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

Small tweak needed here to make the animation work with background property and gradients.

我的代码是完美的背景图像,但我想删除的图像,并使用相同的确切代码,并保持相同的确切功能,而使用梯度(与背景),而不是一个图像。

这里是我的代码(代码段):

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

这里需要小的调整,使动画工作与背景属性和梯度。

answer1: 回答1:

Repeating linear gradients generally require background-size property to be set for the animation to work properly.

For this case , you could set background-size: 28px 100%; and the animation would work fine (refer below snippet).

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

重复线性渐变通常需要设置背景大小属性,以便动画正常工作。

在这种情况下,你可以设置背景尺寸: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>
html  css  css3  background  background-image