我试图让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保持相同的时间,哪个病用于淡入淡出图像?
我也担心旧浏览器会发生什么,我应该考虑使用任何故障保险吗?
时间应该保持不变。在这里,我包含了没有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; }
}