Question

我在动画中放了一些渐变，但它不起作用，为什么？（等等等等，能发表这个问题）

编辑：

CSS

        @keyframes sample {
            0% {background: -moz-linear-gradient(#000,#fff)}
            100% {background: -moz-linear-gradient(#fff,#000)}
        }
        button {
            animation: sample 1s;
            -moz-animation: sample 1s;
        }

Answer 1

只有回答，因为重复的例子似乎是垃圾，因为他们甚至没有提供潜在的解决方法，我喜欢帮助人们学习。所以，为了你修补......甚至为味道添加了一点pizazz ......

请记住，您不是为渐变设置动画，而是通过动画来设置动画渐变的幻觉。

和一些html / css ......

@-webkit-keyframes vertigoBG {
  0%, 100% {
    background-position: 0 0; }
  50% {
    background-position: 100% 0; } }

@keyframes vertigoBG {
  0%, 100% {
    background-position: 0 0; }
  50% {
    background-position: 100% 0; } }

#magic {
  background: linear-gradient(to right, #fefefe, #ED1C24, #ED1C24, #f60, #f60, #ff0, #ff0, #0c4, #0c4, #09c, #09c, #00c, #00c, #909, #909, #ED1C24, #ED1C24, #fefefe);
  background-size: 1000% 100%;
  background-position: 0 0;
  -webkit-animation: vertigoBG 100s linear infinite;
  animation: vertigoBG 20s linear infinite;
  position: absolute;
  top: 0;
  width: 100%;
  height: 170px;
  -webkit-transform: skewY(-2deg);
  -ms-transform: skewY(5deg);
  transform: skewY(5deg);
  margin-top: -85px;
  z-index: -1;
}

<div id="magic"></div>

享受！

动画和渐变可以一起工作吗？

1 个答案: