一段时间后改变线性渐变背景

Question

我想在一段时间后改变背景.如果背景具有"清晰"颜色,则没有问题,但如果颜色是渐变设置,则代码不起作用.那有什么工作吗？

background: -webkit-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); /*For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1));  /*For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1));  /*For Firefox 3.6 to 15 */
background: linear-gradient(rgba(39,49,67,1),rgba(51,90,109,1),rgba(83,142,144,1), rgba(226,228,209,1));  /*Standard syntax */

jsfiddle正常颜色变化

Answer 1

Dbugger所说的是真的 - 你不能用css动画为背景图像制作动画.

但是,您可以使用4级渐变来伪造它(巧妙地定位您的颜色停止 - 我建议使用渐变生成器作为Colorzilla或类似 - 将使您的工作更容易) - 因为渐变被视为a background-image,您可以通过以下方式设置其位置的动画使用background-position.为了设置位置的动画,您需要增加它的大小,以便渐变的一部分位于容器之外.

您可以使用animation-delay在动画开始之前设置初始延迟.

html, body {width:100%;height:100%;margin:0;}
div {
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(118,191,36,1) 25%, rgba(224,117,35,1) 50%, rgba(242,38,42,1) 75%, rgba(130,100,70,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(25%,rgba(118,191,36,1)), color-stop(50%,rgba(224,117,35,1)), color-stop(75%,rgba(242,38,42,1)), color-stop(100%,rgba(130,100,70,1)));
    background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(118,191,36,1) 25%,rgba(224,117,35,1) 50%,rgba(242,38,42,1) 75%,rgba(130,100,70,1) 100%);   
    background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(118,191,36,1) 25%,rgba(224,117,35,1) 50%,rgba(242,38,42,1) 75%,rgba(130,100,70,1) 100%);
    background-size: 100% 400%;
    background-position:0 0;
    -webkit-animation: animateGradient 5s ease 1;
    -moz-animation:    animateGradient 5s ease 1;
    animation:         animateGradient 5s ease 1;
    -webkit-animation-delay: 2s;
    -moz-animation-delay:    2s;
    animation-delay:         2s;
}


@-webkit-keyframes animateGradient {
    0%   {background-position: 0 0;}
    50%  {background-position: 0 100%;}
    100% {background-position: 0 0;}
}
@-moz-keyframes animateGradient {
    0%   {background-position: 0 0;}
    50%  {background-position: 0 100%;}
    100% {background-position: 0 0;}
}
@keyframes animateGradient { 
    0%   {background-position: 0 0;}
    50%  {background-position: 0 100%;}
    100% {background-position: 0 0;}
}

<div></div>

替代方案:您可以采用的另一种方法是将一个元素覆盖在另一个元素上,在顶部元素中设置初始渐变,在底部元素中设置结束渐变,并创建不透明度动画,在一定时间后淡出顶部元素(opacity: 0)

下面是一个关于如何使用标记中的单个元素(依赖于:after或者:before伪元素)来实现它的方法.以下方法具有更多兼容性交叉设备:

html, body {width:100%;height:100%;margin:0;}
.gradient {
    position:relative;    
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1));
    background: -o-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1));
    background: -moz-linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1));
    background: linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1));
}
.gradient:after {
   content:"";
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    background: -o-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    background: -moz-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    background: linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    opacity: 0;
    -webkit-animation: animateGradient 3s linear 1;
    -moz-animation: animateGradient 3s linear 1;
    animation: animateGradient 3s linear 1;
}

@-webkit-keyframes animateGradient {
    0%   {opacity:1;}
    100% {opacity:0;}
}
@-moz-keyframes animateGradient {
    0%   {opacity:1;}
    100% {opacity:0;}
}
@keyframes animateGradient {     
    0%   {opacity:1;}
    100% {opacity:0;}
}

<div class="gradient"></div>

Answer 2

渐变动画

CSS3不支持线性渐变动画,因此为了达到这个效果,您必须在Javascript中编写自己的动画或使用像Easwee所述的背景位置技巧.我更喜欢Javascript,因为它允许您轻松地重用代码,添加动态效果,并快速修改效果.据说Easwee的解决方案非常巧妙,尽管有些限制.

基于CSS的渐变动画:

即使CSS本身不支持渐变动画,因为Easwee声明我们可以使用"hack"通过操纵图像的背景位置在css中创建渐变动画.

示例(全屏):

body {
  margin: 20px;
  background-color: #000;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 480px;
  height: 140px;
  background-color: #333;
  border-radius: 8px;
}

button {
  position: absolute;
  width: 160px;
  height: 36px;
  top: calc(50% - 18px);
  left: 50px;
  border: solid 1px #ccc;
  border-radius: 8px;
  color: #fff;
  font: 16px sans-serif;
  
  /* set up background gradient and animation */
  background-image: linear-gradient(#5187c4, #1c2f45);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;
}
.container:hover button {
  /* shift background gradient position */
  background-position: 0 0;
}

.slider {
  position: absolute;
  top: calc(50% - 18px);
  right: 50px;
  margin-top: -36px;
  width: 160px;
  height: 72px;
  background-image: linear-gradient(#5187c4, #1c2f45);
  transition: margin-top .5s;
}
.container:hover .slider {
  margin-top: 0px;
}

.frame {
  position: absolute;
  top: calc(50% - 18px);
  right: 50px;
  box-sizing: border-box;
  width: 160px;
  height: 36px;
  border: solid 1px #ccc;
  border-radius: 8px;
}

.info {
  margin: 20px auto 0;
  color: #ccc;
  font: 18px/150% sans-serif;
  text-align: justify;
  width: 480px;
}

<div class="container">
  <button disabled>Some Button</button>
  <div class="slider"></div>
  <div class="frame"></div>
</div>

<div class="info">
  You can't animate gradient colors with pure CSS. Gradients are set via background-image, which is not (currently) an animatable property. But background-position is. So you can use background-size to make the background taller than the element it's on, then animate background-position to slide it up or down. The result is a simple animated fading gradient.
</div>

Code Pen Link

基于Javascript的渐变动画

为了构建基于Javascript的渐变动画,我们需要:

• 创建一个函数,它接受一个元素,一系列颜色,它们之间的时间延迟,以及一个在函数结束后运行的回调(允许你做一些事情,比如让它连续重复或直到条件满足).
• 然后使用该函数使用每秒触发15次的间隔,并将其当前时间转换为0到100之间的进度值,该值与完成的距离有多近.
• 然后我们将每个匹配的r,g,b的颜色差乘以进度,以得到我们当前所处的过渡阶段.
• 我们完成后,我们继续下一个颜色.
• 在所有这一切结束时,我们启动回调,然后我们可以决定做什么.

(如果你想要一个代码解决方案让我知道.这是一个很长的输入过程,所以因为这个原因,如果你只使用一次,两个可能三个渐变颜色使用Eawee的解决方案.否则Javascript是你的朋友. )

一个简单的Javascript渐变动画示例:

var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
//color table indices for: 
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.002;

function updateGradient()
{
  
  if ( $===undefined ) return;
  
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

 $('#gradient').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
  
  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    
    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    
  }
}

setInterval(updateGradient,10);

	body{
	 background-color: #000000;
   padding: 0px;
   margin: 0px;
 }

#gradient
{
  width: 100%;
  height: 800px;
  padding: 0px;
  margin: 0px;
}

<html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  </head>
  <body>
    <div id="gradient" />
 </body>
</html>

   

基于Javascript的渐变动画师(代码笔)

有用的资源:

CSS Gradient Animator Generator

CSS Gradient Animator演练