如何使用CSS /全屏幻灯片获取多个旋转背景封面

纳伦德拉

我想使用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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用多个滑块获取当前幻灯片和总幻灯片

来自分类Dev

如何使用Vegas jquery插件自定义全屏背景图像幻灯片

来自分类Dev

如何使用Vegas Jquery插件自定义全屏背景图像幻灯片

来自分类Dev

使用多个滑块获取当前和全部幻灯片

来自分类Dev

更改jQuery幻灯片脚本以旋转在CSS类中定义的背景图像

来自分类Dev

CSS背景幻灯片动画

来自分类Dev

具有双淡入/淡出效果的纯全屏CSS幻灯片,可用于背景幻灯片元素上的位移元素

来自分类Dev

如何使用幻灯片更改UISlider背景颜色

来自分类Dev

SSRS如何以幻灯片方式在报告之间旋转?

来自分类Dev

CSS背景图片幻灯片

来自分类Dev

CSS3-过渡效果幻灯片背景位置

来自分类Dev

如何获取Google幻灯片标题和幻灯片编号的列表-Google Apps脚本

来自分类常见问题

如何根据活动幻灯片更改身体背景颜色?

来自分类Dev

如何将幻灯片放到背景上?

来自分类Dev

如何为nav> ul标签制作背景幻灯片?

来自分类Dev

在 boostrap carousel 中使用图像而不是幻灯片的背景

来自分类Dev

使用CSS一次显示所有Bootstrap旋转木马幻灯片

来自分类Dev

使用CSS一次显示所有Bootstrap旋转木马幻灯片

来自分类Dev

如何创建纯CSS幻灯片?

来自分类Dev

如何在单个页面上显示多个幻灯片

来自分类Dev

使用CSS的幻灯片过渡

来自分类Dev

使用angularjs的CSS幻灯片动画

来自分类Dev

使用CSS / HTML移动幻灯片

来自分类Dev

使用Javascript / CSS的内容幻灯片

来自分类Dev

在JQuery Cycle中,如何获取当前幻灯片的src?

来自分类Dev

如何获取幻灯片的当前图片来源?

来自分类Dev

使用 PowerPoint Interop 获取幻灯片的页眉和页脚

来自分类Dev

如何使用php while循环在旋转木马中显示每张幻灯片2张图像?

来自分类Dev

CSS幻灯片过渡

Related 相关文章

  1. 1

    使用多个滑块获取当前幻灯片和总幻灯片

  2. 2

    如何使用Vegas jquery插件自定义全屏背景图像幻灯片

  3. 3

    如何使用Vegas Jquery插件自定义全屏背景图像幻灯片

  4. 4

    使用多个滑块获取当前和全部幻灯片

  5. 5

    更改jQuery幻灯片脚本以旋转在CSS类中定义的背景图像

  6. 6

    CSS背景幻灯片动画

  7. 7

    具有双淡入/淡出效果的纯全屏CSS幻灯片,可用于背景幻灯片元素上的位移元素

  8. 8

    如何使用幻灯片更改UISlider背景颜色

  9. 9

    SSRS如何以幻灯片方式在报告之间旋转?

  10. 10

    CSS背景图片幻灯片

  11. 11

    CSS3-过渡效果幻灯片背景位置

  12. 12

    如何获取Google幻灯片标题和幻灯片编号的列表-Google Apps脚本

  13. 13

    如何根据活动幻灯片更改身体背景颜色?

  14. 14

    如何将幻灯片放到背景上?

  15. 15

    如何为nav> ul标签制作背景幻灯片?

  16. 16

    在 boostrap carousel 中使用图像而不是幻灯片的背景

  17. 17

    使用CSS一次显示所有Bootstrap旋转木马幻灯片

  18. 18

    使用CSS一次显示所有Bootstrap旋转木马幻灯片

  19. 19

    如何创建纯CSS幻灯片?

  20. 20

    如何在单个页面上显示多个幻灯片

  21. 21

    使用CSS的幻灯片过渡

  22. 22

    使用angularjs的CSS幻灯片动画

  23. 23

    使用CSS / HTML移动幻灯片

  24. 24

    使用Javascript / CSS的内容幻灯片

  25. 25

    在JQuery Cycle中,如何获取当前幻灯片的src?

  26. 26

    如何获取幻灯片的当前图片来源?

  27. 27

    使用 PowerPoint Interop 获取幻灯片的页眉和页脚

  28. 28

    如何使用php while循环在旋转木马中显示每张幻灯片2张图像?

  29. 29

    CSS幻灯片过渡

热门标签

归档