Question

我有这个CSS试图通过动画其位置无限地移动覆盖在背景渐变上的背景图像。图像不是动画。我基于一个没有渐变的例子。 https://davidwalsh.name/background-animation-css

建议表示赞赏。

  /*Home header scrolling background pattern animation*/
  @keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
  }



#homeheader{
background-color: #53DFFD; 
background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -webkit-radial-gradient(circle, #53DFFD, #6960F5); 
background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -moz-radial-gradient(circle, #53DFFD, #6960F5); 
background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -o-radial-gradient(circle, #53DFFD, #6960F5); 
background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), radial-gradient(circle, #53DFFD, #6960F5); 
background-size: cover, cover;
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 4s linear infinite;
}

Answer 1

您的问题不是渐变，而是background-size: cover属性。您无法使用background-position属性设置background-size: cover属性的动画。

  /*Home header scrolling background pattern animation*/
@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

#homeheader{
  width: 300px;
  height: 200px;
  background-color: #53DFFD; 
  background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -webkit-radial-gradient(circle, #53DFFD, #6960F5); 
  background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -moz-radial-gradient(circle, #53DFFD, #6960F5); 
  background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), -o-radial-gradient(circle, #53DFFD, #6960F5); 
  background:url("http://www.johnrockson.com/wp-content/uploads/2016/02/expandsnaps.png"), radial-gradient(circle, #53DFFD, #6960F5); 
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 4s linear infinite;
}

<div id="homeheader"></div>

使用CSS渐变动画背景图像？

1 个答案: