我想使用HTML和CSS (因为这是我到目前为止学习的唯一语言)提供多个背景图片。
我获得背景封面的最佳结果是来自id="full-bg"
。现在,我如何使其同时旋转到多张背景封面照片(每5秒更改一次)。
试试这个JSfiddle
此代码仅使用css并在添加的背景中旋转。
body{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
animation-duration: 5s;
animation-name: fade-bg;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
@keyframes fade-bg {
0% {
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
50% {
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
51% {
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
100% {
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
}
我希望这有帮助!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句