javascript - 如何使用淡入效果更改线性渐变的主体背景

Question

我试图让 body 的背景改变线性渐变 onload 事件的 onload。

到目前为止我已经这样做了:

$(document).ready(function (){
  $("body").addClass("bc");
});

    /*CSS*/
    .bc{
        transition: background 1s;
        background: red; /*This actually gets the fade in animation effect*/
        /*background: linear-gradient(30deg, red, yellow) This doesn't get the effect*/
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我还尝试使用关键帧来更改线性渐变的背景，但它会急剧变化

Answer 1

这里有一个关键帧动画的例子:

$(document).ready(function (){
      $("body").addClass("bc");
});

/*CSS*/
@-webkit-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes GradientAnimation { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.bc{
  background-color: red;
  background: linear-gradient(270deg, #e4cc08, #e45708);
  background-size: 400% 400%;

  -webkit-animation: GradientAnimation 15s ease infinite;
  -moz-animation: GradientAnimation 15s ease infinite;
  -o-animation: GradientAnimation 15s ease infinite;
  animation: GradientAnimation 15s ease infinite;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这里有一个很好的生成器:https://www.gradient-animator.com/