使循环div背景淡入不同的颜色

时间:2014-01-11 10:59:09

标签: jquery css fadein fadeout

我试图让div的背景连续变换4或5次,但是真的不知道从哪里开始。我需要时间非常精确,因为我还必须在背景颜色的同时淡化图像。

这是最好的方法吗? jQuery还是css?

由于

修改 我已经能够使用CSS动画和关键帧来改变背景属性:

<div class="fading"></div>

.fading {
    height:200px;
    width:100%;
    background: black;
    animation: fading 30s infinite;
    -webkit-animation: fading 30s infinite;
    border-radius:5px;
}
@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; }
}

但是我不确定这是否与jquery保持同一时间,哪些用于淡入和淡出图像??

此外,我担心旧浏览器会发生什么,我应该使用哪些故障保险箱?

1 个答案:

答案 0 :(得分:2)

时间应该保持不变。在这里,我已经包含了没有jQuery的淡化图像。鉴于代码,我不认为你真的需要帮助这样做,但回答这个问题,虽然它也适用于旧浏览器,但jQuery可能是更好的选择。

演示http://jsfiddle.net/dP8fL/1/(时间变为10秒,等待检查无效)

<div class="fading">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTl7V8rHy90EMd_IYWwbiucARcCPDHnwBkoB7T3ZJjDdqauT-j3eQ" />
</div>

CSS

.fading {
    height:200px;
    width:100%;
    background: black;
    animation: fading 30s infinite;
    -webkit-animation: fading 30s infinite;
    border-radius:5px;
}
.fading img{
    width:100px;
    animation: opacityfading 30s infinite;
    -webkit-animation: opacityfading 30s infinite;
    margin:30px;
}
@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; }
}
@keyframes opacityfading {
    0%   { opacity: 0; }
    33%  { opacity: 1; }
    66%  { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes opacityfading {
    0%   { opacity: 0; }
    33%  { opacity: 1; }
    66%  { opacity: 0; }
    100% { opacity: 1; }
}