如何使用淡入淡出效果更改线性渐变的body背景

Question

我正在尝试获取正文的背景以更改线性梯度加载事件的加载。

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

$(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/

Answer 2

由于您无法在线性渐变上添加过渡，因此您可以使用使淡入淡出的伪元素，并且可以轻松调整其背景以及正文的背景以创建所需的效果：

setTimeout(function() {
  $('body').addClass('bc')
}, 500); /*Control the start of fading here */

/*CSS*/
body {
  transition: background 5s;
  background:linear-gradient(60deg, yellow, red);
  height:100vh;
  margin:0;
}
body:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 3s; /* control the speed of fading here*/
  background: linear-gradient(30deg, red, pink)
}
body.bc:before {
  opacity: 1;
}

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

Answer 3

CSS 过渡有效，但它在背景上放置了一个叠加层。如果您有放置在背景上方的文本，它将被覆盖。

我用jQuery编写了一个解决方案，您可以在其中定义颜色和顺序，将它们从一个更改为另一个：

在下面的示例中，动画从绿色变为紫色，然后又回到绿色，依此类推，直到动画在定义的秒数后停止

var stopAfterSec = 23;
var speed = 15;
var purple = [255, 26, 26];
var green = [26, 255, 118];
var sea_green = [26, 255, 244];
var order = [green, sea_green, purple];
var current = 0;
var direction = -1;
var color = end_color = order[current];
function updateGradient() {
  if (color[0] == end_color[0] && color[1] == end_color[1] && color[2] == end_color[2]) {
    direction = (current > 0 && current < order.length - 1) ? direction : (-1) * Math.sign(direction);
    current += direction;
    end_color = order[current];
  }
  $('.animGradientEfron').css({
    background: "-webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 1) 0%, rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", 0.48) 100%)"
  });
  for (var i = 0; i <= 2; i++) {
    if (color[i] != end_color[i]) {
      color[i] += Math.sign((end_color[i] - color[i]));
    }
  }
}
jQuery(document).ready(function() {
  var startGradientAnimation = setInterval(updateGradient, speed);
  setTimeout(function() {
    clearInterval(startGradientAnimation);
  }, stopAfterSec * 1000);
});

.animGradientEfron {
  position: absolute;
  top: 25%;
  left: 0%;
  width: 100%;
  height: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animGradientEfron"></div>

Answer 4

请参考

 .css {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
 height: 200px;
 }
 <div class="css"></div>

在背景图像上使用 css 渐变