我想通过 crossfade 将 div 元素的背景颜色从黑色更改为红色再更改为蓝色,但现在不知道该怎么做。我尝试用图像来做,但是将图像作为背景并通过淡入淡出效果进行更改会使其变得很重。有什么办法可以通过 CSS 或 Javascript 来做到这一点吗?请帮忙。
最佳答案
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; }
}
根据 w3schools 的说法,这必须在 IE(10+)、Opera、Chrome、Safari 和 Firefox 中运行。 http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
关于javascript - 更改 div 元素的背景颜色循环淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17910235/