纯CSS3制作满屏图像幻灯片

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

记得前段时间在《完美的页面背景图片制作》介绍了几种实现全屏背景图片的制作方法,其中第一种就是使用的CSS3的background-size来实现的。今天看了Mary Lou (Manoela Ilic)写的一篇有关于全屏背景图像的幻灯片效果的教程《Fullscreen Background Image Slideshow with CSS3》,觉得特有意思,同时勾起了我动手的冲动。在动手之前我在想,这样效果能不能配合Dan EdenAnimate.css(有关于animate.css的中文介绍可以点击这里)制作出不同的动画效果呢?经过自己动手一试,还真没有问题,此方案可行。于是整理出来与大家一起分享。

HTML Markup

      <ul class="cb-slideshow">
        <li>image1</li>
        <li>image2</li>
        <li>image3</li>
        <li>image4</li>
        <li>image5</li>
        <li>image6</li>
      </ul>
      <div id="wrapper">
        <!-- Page Content here-->
      </div>
    

这里采用了一个简单清晰的结构,使用列表来放置不同的背景图片,而页面的内容都将放在“div#wrapper”容器之中。

CSS Code

下面主要来看样式是如何实现,大家要是感兴趣的话可以跟着一起动手来制作:

第一步:固定图片,并全屏显示

在这一步中,把列上固定在窖口左上角,并使其大小等于浏览器屏幕,为了效果更好些,还使用了“:after”给他们加上一层面纱效果,具体看下面代码:

       *{
          margin:0;
          padding:0;
        }
       
        body{
        	background: #000;
        	font: 15px/400 Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
        	color: #aa3e03;
        	overflow-y: scroll;/*这个很重要*/
        	overflow-x: hidden;/*这个很重要*/
        }
        .cb-slideshow,
        .cb-slideshow:after {
          position: fixed;
          width: 100%;
          height: 100%;
          top:0;
          left:0;
          z-index:0;
        }
        .cb-slideshow:after {
          content:"";
          background: url("images/pattern.png") repeat left top;
        }
    

第二步:列表上放置不同的背景图片

为了让背景图片能全屏显示,将列表项绝对定位,并使用其大小等于浏览器屏幕大小,同时将背景图片放大到全屏,具体代码如下所示:

      .cb-slideshow li {
        position: absolute;
        width:100%;/*这个很重要*/
        height: 100%;/*这个很重要*/
        top:0;
        left:0;
        color: transparent;
        /*===放大背景图片==*/
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        background-size: cover;        
        background-position: center;/*背景图片居中显示*/
        background-repeat: none;/*背景图片不平铺*/
        opacity:0;/*载入时为透明*/
        z-index:0;        
      }
      /*====设置不同的背景图片===*/
      .cb-slideshow li:nth-child(1) { 
          background-image: url("images/1.jpg"); 
      }
      .cb-slideshow li:nth-child(2){ 
          background-image: url("images/2.jpg");          
      }
      .cb-slideshow li:nth-child(3) { 
          background-image: url("images/3.jpg");           
      }
      .cb-slideshow li:nth-child(4){ 
          background-image: url("images/4.jpg");           
      }
      .cb-slideshow li:nth-child(5){ 
          background-image: url("images/5.jpg");           
      }
      .cb-slideshow li:nth-child(6){ 
          background-image: url("images/6.jpg");           
      }
    

第三步:自定义动画

这一步是一个关键步,使用Animation中的

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/fullscreen-background-image-slideshow-with-css3

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部