Question

试着弄清楚这里发生了什么。看到了如何在http://www.gradient-animator.com/

上进行背景转换的一个非常酷的例子

但是，当我将它们插入我的测试站点时，后台仍然可靠，并且在您在开发者控制台中禁用background-size属性然后重新启用它之前不会进行转换。

我只是为了我的生活，不能弄清楚是什么错......

＆＃13;

@-webkit-keyframes gbpr {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gbpr {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gbpr { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.container {
  height: 100%;
  width: 100%;
}
body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.container {
  background: linear-gradient(270deg, #0ae6ae, #2d80f3, #bd2df3, #f32d57);
  background-size: 800% 800%;

  -webkit-animation: gbpr 30s ease infinite;
  -moz-animation: gbpr 30s ease infinite;
  animation: gbpr 30s ease infinite;
}

＆＃13;

<div class="container">

</div>

＆＃13;

Answer 1

如果在线性渐变中包含！important，则动画无法移动它。就那么简单。

背景大小超过100％的价值？

1 个答案: