html图片幻灯片怎么做,纯CSS3制作满屏图像幻灯片

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

HTML Markup

• image1
• image2
• image3
• image4
• image5
• image6

这里采用了一个简单清晰的结构，使用列表来放置不同的背景图片，而页面的内容都将放在“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中的