纯CSS3制作满屏图像幻灯片_fullscreen, css3实例教程

作者：大漠日期：2012-01-04 点击：3136

记得前段时间在《完美的页面背景图片制作》介绍了几种实现全屏背景图片的制作方法，其中第一种就是使用的CSS3的background-size来实现的。今天看了Mary Lou (Manoela Ilic)写的一篇有关于全屏背景图像的幻灯片效果的教程《Fullscreen Background Image Slideshow with CSS3》，觉得特有意思，同时勾起了我动手的冲动。在动手之前我在想，这样效果能不能配合Dan Eden的Animate.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中的keyframe来定义动画效果：

      @keyframes imageAnimation {/*==定义了一个imageAimation的动画==*/
      	0% {/*==开始效果==*/
      		opacity: 0;
      		transform: translateY(2000px);
      		animation-timing-function: ease-in;    		
      	}

      	8% {/*==8％位置处的效果==*/
      		opacity: 1;
      		transform: translateY(-30px);
      		animation-timing-function: ease-out;
      	}
        17% {/*＝17％处的效果＝＝*/
      		opacity: 1;
      	}
      	25% {/*==25％处效果==*/
      	  opacity:0;
      		transform: translateY(10px);
      	}

      	100% {/*==结束时效果==*/
      	  opacity:0;
      		transform: translateY(0);
      	}
      }

上面我们创建一个叫“imageAnimation”的动画，具体如何创建这样的动画，大家感兴趣的话可以点击《Animation》一文。

第四步：调用动画imageAnimation

上一步定义好动画效果了，那么这一步就需将动画调用进来：

       .cb-slideshow li {
          position: absolute;
          width:100%;
          height: 100%;
          top:0;
          left:0;
          color: transparent;
          background-size: cover;
          background-position: center;
          background-repeat: none;
          opacity:0;
          z-index:0;
          -webkit-backface-visibility: hidden;
          -webkit-animation: imageAnimation 36s linear infinite 0s;
          -moz-animation: imageAnimation 36s linear infinite 0s;
          -o-animation: imageAnimation 36s linear infinite 0s;
          -ms-animation: imageAnimation 36s linear infinite 0s;
          animation: imageAnimation 36s linear infinite 0s;
        }



        .cb-slideshow li:nth-child(1) { 
            background-image: url("images/1.jpg"); 
        }
        .cb-slideshow li:nth-child(2){ 
            background-image: url("images/2.jpg"); 
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            -ms-animation-delay: 6s;
            animation-delay: 6s;
        }
        .cb-slideshow li:nth-child(3) { 
            background-image: url("images/3.jpg"); 
            -webkit-animation-delay: 12s;
            -moz-animation-delay: 12s;
            -o-animation-delay: 12s;
            -ms-animation-delay: 12s;
            animation-delay: 12s;
        }
        .cb-slideshow li:nth-child(4){ 
            background-image: url("images/4.jpg"); 
            -webkit-animation-delay: 18s;
            -moz-animation-delay: 18s;
            -o-animation-delay: 18s;
            -ms-animation-delay: 18s;
            animation-delay: 18s;
        }
        .cb-slideshow li:nth-child(5){ 
            background-image: url("images/5.jpg"); 
            -webkit-animation-delay: 24s;
            -moz-animation-delay: 24s;
            -o-animation-delay: 24s;
            -ms-animation-delay: 24s;
            animation-delay: 24s;
        }
        .cb-slideshow li:nth-child(6){ 
            background-image: url("images/6.jpg"); 
            -webkit-animation-delay: 30s;
            -moz-animation-delay: 30s;
            -o-animation-delay: 30s;
            -ms-animation-delay: 30s;
            animation-delay: 30s;
        }

上面有几个关键的参数：

animation-name:动画名称，调用的是“imageAnimation”
animation-duration:动画持续的时间是36s
animation-timing-function：动画频率使用的是linear
animation-iteration-count：动画播放次数是无数次
animation-delay:动画延迟时间，默认是0s

每个图片的动画延迟时间是以6s递增，依次是0s,6s,12s,18s,24s,30s。当然大家可以根据自己的需求去配置的。

第六步：定义主内容样式

定义主内容样式有一点需要注意，那就是内容层次和前面列表图片的层次关系，我们主要使用“z-index”来控制，另外为了能看到底下的背景效果，背景色还采用了rgba来写样式：

       #wrapper {
          width: 960px;
          background: rgba(255,255,255,0.8);
          margin: 0 auto;
          position: relative;
          z-index:99999;
        }

那么到这一步可以说效果出来了，不过此时所有图片的动画效果都是一样的，那么为了让每次图片有不同的动画效果播放，我们可以借用Dan Eden的Animate.css中的动画效果，当然大家可以在此基础上制作自己需要的动画风格，然后只需要在相应的列表项中调用不同的动画：

      @keyframes bounceInDown {
      	0% {
      		opacity: 0;
      		transform: translateY(-2000px);
      	}

      	8% {
      		opacity: 1;
      		transform: translateY(30px) rotate(360deg);
      	}

      	17% {
      	  opacity:1;
      		transform: translateY(-10px) rotate(720deg);
      	}
      25% {
        	opacity:0;
        	transform: translateY(-10px) rotate(0deg);
        }
      	
    	100% {
      		transform: translateY(0);
      	}
      }

比如说我们在第二张图片中调用了这个动画效果：

       .cb-slideshow li:nth-child(2){ 
            background-image: url("images/2.jpg"); 
            -moz-animation-name: bounceInDown;
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            -ms-animation-delay: 6s;
            animation-delay: 6s;
        }

那么到这里我们样式就算是完成了，全部样式如下：

      *{
        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;
        background-size: cover;
        background-position: center;
        background-repeat: none;
        opacity:0;
        z-index:0;
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 36s linear infinite 0s;
        -moz-animation: imageAnimation 36s linear infinite 0s;
        -o-animation: imageAnimation 36s linear infinite 0s;
        -ms-animation: imageAnimation 36s linear infinite 0s;
        animation: imageAnimation 36s linear infinite 0s;
      }

      .cb-slideshow li:nth-child(1) { 
          background-image: url("images/1.jpg"); 
      }
      .cb-slideshow li:nth-child(2){ 
          background-image: url("images/2.jpg"); 
          -moz-animation-name: bounceInDown;
          -webkit-animation-delay: 6s;
          -moz-animation-delay: 6s;
          -o-animation-delay: 6s;
          -ms-animation-delay: 6s;
          animation-delay: 6s;
      }
      .cb-slideshow li:nth-child(3) { 
          background-image: url("images/3.jpg"); 
          -webkit-animation-delay: 12s;
          -moz-animation-delay: 12s;
          -o-animation-delay: 12s;
          -ms-animation-delay: 12s;
          animation-delay: 12s;
      }
      .cb-slideshow li:nth-child(4){ 
          background-image: url("images/4.jpg"); 
          -webkit-animation-delay: 18s;
          -moz-animation-delay: 18s;
          -o-animation-delay: 18s;
          -ms-animation-delay: 18s;
          animation-delay: 18s;
      }
      .cb-slideshow li:nth-child(5){ 
          background-image: url("images/5.jpg"); 
          -webkit-animation-delay: 24s;
          -moz-animation-delay: 24s;
          -o-animation-delay: 24s;
          -ms-animation-delay: 24s;
          animation-delay: 24s;
      }
      .cb-slideshow li:nth-child(6){ 
          background-image: url("images/6.jpg"); 
          -webkit-animation-delay: 30s;
          -moz-animation-delay: 30s;
          -o-animation-delay: 30s;
          -ms-animation-delay: 30s;
          animation-delay: 30s;
      }
      /*定义动画*/
       @-moz-keyframes imageAnimation {
        0% {
        		opacity: 0;
        		-moz-transform: translateY(2000px);
        		-moz-animation-timing-function: ease-in;    		
        	}

        8% {
        		opacity: 1;
        		-moz-transform: translateY(-30px);
        		-moz-animation-timing-function: ease-out;
        	}
        17% {
        		opacity: 1;
        }
        25% {
        	  opacity:0;
        		-moz-transform: translateY(10px);
        }
	      
	      100% {
        	  opacity:0;
        		-moz-transform: translateY(0);
        	}
        }
        @-webkit-keyframes imageAnimation {
          	0% {
          		opacity: 0;
          		-webkit-transform: translateY(2000px);
          		-webkit-animation-timing-function: ease-in;    		
          	}

          	8% {
          		opacity: 1;
          		-webkit-transform: translateY(-30px);
          		-webkit-animation-timing-function: ease-out;
          	}
            17% {
          		opacity: 1;
          	}
          	25% {
          	  opacity:0;
          		-webkit-transform: translateY(10px);
          	}

          	100% {
          	  opacity:0;
          		-webkit-transform: translateY(0);
          	}
          }  
          @-o-keyframes imageAnimation {
            	0% {
            		opacity: 0;
            		-o-transform: translateY(2000px);
            		-o-animation-timing-function: ease-in;    		
            	}

            	8% {
            		opacity: 1;
            		-o-transform: translateY(-30px);
            		-o-animation-timing-function: ease-out;
            	}
              17% {
            		opacity: 1;
            	}
            	25% {
            	  opacity:0;
            		-o-transform: translateY(10px);
            	}

            	100% {
            	  opacity:0;
            		-o-transform: translateY(0);
            	}
            }
            @-ms-keyframes imageAnimation {
              	0% {
              		opacity: 0;
              		-ms-transform: translateY(2000px);
              		-ms-animation-timing-function: ease-in;    		
              	}

              	8% {
              		opacity: 1;
              		-ms-transform: translateY(-30px);
              		-ms-animation-timing-function: ease-out;
              	}
                17% {
              		opacity: 1;
              	}
              	25% {
              	  opacity:0;
              		-ms-transform: translateY(10px);
              	}

              	100% {
              	  opacity:0;
              		-ms-transform: translateY(0);
              	}
              }      
      @keyframes imageAnimation {
      	0% {
      		opacity: 0;
      		transform: translateY(2000px);
      		animation-timing-function: ease-in;    		
      	}

      	8% {
      		opacity: 1;
      		transform: translateY(-30px);
      		animation-timing-function: ease-out;
      	}
        17% {
      		opacity: 1;
      	}
      	25% {
      	  opacity:0;
      		transform: translateY(10px);
      	}

      	100% {
      	  opacity:0;
      		transform: translateY(0);
      	}
      }
      
       @-moz-keyframes bounceInDown {
         	0% {
          		opacity: 0;
           		-moz-transform: translateY(-2000px);
           	}
        	8% {
          		opacity: 1;
          		-moz-transform: translateY(30px) rotate(360deg);
        	}
        	17% {
          	  opacity:1;
           		-moz-transform: translateY(-10px) rotate(720deg);
          	}
           25% {
            	  opacity:0;
             		-moz-transform: translateY(-10px) rotate(0deg);
           	}
          	100% {
             		-moz-transform: translateY(0);
             	}
            }

            @-webkit-keyframes bounceInDown {
               	0% {
                		opacity: 0;
                 		-webkit-transform: translateY(-2000px);
                 	}
              	8% {
                		opacity: 1;
                		-webkit-transform: translateY(30px) rotate(360deg);
              	}
              	17% {
                	  opacity:1;
                 		-webkit-transform: translateY(-10px) rotate(720deg);
                	}
                 25% {
                  	  opacity:0;
                   		-webkit-transform: translateY(-10px) rotate(0deg);
                 	}
                	100% {
                   		-webkit-transform: translateY(0);
                   	}
                  }
           @-o-keyframes bounceInDown {
            	0% {
             		opacity: 0;
              		-o-transform: translateY(-2000px);
              	}
           	8% {
             		opacity: 1;
             		-o-transform: translateY(30px) rotate(360deg);
           	}
           	17% {
             	  opacity:1;
              		-o-transform: translateY(-10px) rotate(720deg);
             	}
              25% {
               	  opacity:0;
                		-o-transform: translateY(-10px) rotate(0deg);
              	}
             	100% {
                		-o-transform: translateY(0);
                	}
               }
       @-ms-keyframes bounceInDown {
         	0% {
          		opacity: 0;
           		-ms-transform: translateY(-2000px);
           	}
        	8% {
          		opacity: 1;
          		-ms-transform: translateY(30px) rotate(360deg);
        	}
        	17% {
          	  opacity:1;
           		-ms-transform: translateY(-10px) rotate(720deg);
          	}
           25% {
            	  opacity:0;
             		-ms-transform: translateY(-10px) rotate(0deg);
           	}
          	100% {
             		-ms-transform: translateY(0);
             	}
            }      
            @keyframes bounceInDown {
               	0% {
                		opacity: 0;
                 		transform: translateY(-2000px);
                 	}
              	8% {
                		opacity: 1;
                		transform: translateY(30px) rotate(360deg);
              	}
              	17% {
                	  opacity:1;
                 		transform: translateY(-10px) rotate(720deg);
                	}
                 25% {
                  	  opacity:0;
                   		transform: translateY(-10px) rotate(0deg);
                 	}
                	100% {
                   		transform: translateY(0);
                   	}
                  }            
      ＃wrapper {
        width: 960px;
        background: rgba(255,255,255,0.8);
        margin: 0 auto;
        position: relative;
        z-index:99999;
      }

到这效果就算是全部出来了，大家感兴趣的话不仿试试，希望您喜欢这个教程。如果你有更好的效果，记得与我们一起分享。

如需转载烦请注明出处：W3CPLUS

上一篇: 网站设计的黄金比例应用 | 下一篇: jQuery和CSS3制作回到页面顶部和底部

w3cplus

纯CSS3制作满屏图像幻灯片

HTML Markup

CSS Code

GitHub

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品

w3cplus

你在这里

纯CSS3制作满屏图像幻灯片

HTML Markup

CSS Code

GitHub

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品