CSS循环渐变转换

Question

CSS循环渐变转换

3

我有一个问题，我想创建一个CSS循环渐变动画，但是当我这样做时，动画非常静态，没有平滑的动画效果。下面是我目前正在努力的一个例子。希望你能帮我。

.slider1 {
  background: background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)) !important;
}

/* css animation not smooth */
.slider1 {
  opacity: .5;
  animation: myfirst 5s;
  -moz-animation: myfirst 5s infinite; /* Firefox */
  -webkit-animation: myfirst 5s infinite; /* Safari and Chrome */
}

@-moz-keyframes myfirst { /* Firefox */ 
  0% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255))
  }
  50% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0))
  }
  100% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255))
  }
}

@-webkit-keyframes myfirst { /* Safari and Chrome */
  0% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255))
  }
  50% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0))
  }
  100% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255))
  }
}

<div class="slider1">
  This some content
  <div class="wsite-spacer" style="height:600px;"></div>
</div>

- Cody

您可以删除供应商前缀属性。它们是为非常老的浏览器设计的。 - Vadim Ovchinnikov

你不能这样动画渐变。尝试动画背景位置，或者查看使用伪元素-->https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759。也可以访问https://www.gradient-animator.com/。 - sol

谢谢，您能展示一下我如何修复我的例子吗？我已经阅读了Dave的文章，但仍然无法弄清楚如何在我的例子中修复它。 - Cody

2个回答

0

您不能对 background 进行动画处理，但是您可以使用 linear-gradient 添加块并更改它们的 opacity 来达到相似的效果。

.slider1 {
  opacity: .5;
  position: relative;
}

.frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  /* animation for 3 block 5 second each, 3 × 5 = 15 */
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.frame1 {
  animation-name: hide1;
  background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255));
}

.frame2 {
  animation-name: hide2;
  background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0));
}

.frame3 {
  animation-name: hide3;
  background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255));
}

@keyframes hide1 {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}

@keyframes hide2 {
  33% {
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
}

@keyframes hide3 {
  67% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="slider1">
  This some content
  <div class="wsite-spacer" style="height:600px;"></div>
  <div class="frame frame1"></div>
  <div class="frame frame2"></div>
  <div class="frame frame3"></div>
</div>

- Vadim Ovchinnikov

非常感谢，这太棒了。我只有一个最后的问题，因为我想将这个渐变循环应用到特定的滑块（Slider Revolution Responsive jQuery），为了让它工作，我必须仅在一个类.slider1上应用Overlay css颜色循环。这就是为什么我认为如果我使用.frame和.frame1，它不会在我的网站上起作用，但如果您知道如何将相同的内容应用于仅一个类，以便它可以与我的rev slider jquery一起使用，那将是非常史诗的。 - Cody

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vals · Accepted Answer

基本上，您的渐变在顶部有固定的颜色，在底部有可变的颜色。

如果将此渐变构建为2个不同的叠加渐变，则可以移动底部的一个并通过位置的变化创建颜色的变化。

div {
    width: 400px;
    height: 300px;
    background-image: 
linear-gradient(to top, transparent, red),    
linear-gradient(to right, green, yellow, blue);
    background-size: 100% 100%, 2000% 100%;
    animation: move 5s infinite;
}

@keyframes move {
 from {background-position: center center, left center;}
 to {background-position: center center, right center;}
}

<div></div>