更改背景 - div元素的颜色在循环中淡出淡出

问题描述

我想通过crossfade将div元素的背景颜色从黑色改为红色，再改为蓝色，但现在不知道该如何做。我试图做的图像，但把图像作为背景和改变通过淡化效果使它很重。有没有办法通过CSS或Javascript？请帮助。

解决方案

CSS：

  .fadechange {
 height：200px; 
 width：100％; 
 background：black; 
动画：fading 4s infinite; 
 -webkit-animation：fading 4s infinite; 
} 
 
 @keyframes fading {
 0％{background：black; } 
 33％{background：red; } 
 66％{background：blue; } 
 100％{background：black; } 
} 
 
 @ -webkit-keyframes fading {
 0％{background：black; } 
 33％{background：red; } 
 66％{background：blue; } 
 100％{background：black; }根据w3schools，这必须工作在IE（10+），Opera， Chrome，Safari和Firefox。  
 
 
 
  
 
I want to change the background color of a div element from black to red to blue via crossfade , but right now have no idea how to do it. I tried doing it with images, but putting an image as background and change via fade effect  makes it heavy. Is there any way to do it via CSS or Javascript? Please Help.
 解决方案 
CSS:
.fadechange {
    height:200px;
    width:100%;
    background: black;
    animation: fading 4s infinite;
   -webkit-animation: fading 4s infinite;
}

@keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}

@-webkit-keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}
According to w3schools this must work in IE(10+), Opera, Chrome, Safari and Firefox. http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
jsfiddle
                        
这篇关于更改背景 -  div元素的颜色在循环中淡出淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！