利用css3的动画新性animation来完成,目前只有webkit内核的浏览器支持此属性,所以前面加了-webkit
<!DOCTYPE html>
<head><meta charset="utf-8" />
<title>css3实现幻灯片效果</title>
<meta content="" name="description" />
<meta content="" name="author" />
<style type="text/css">
.cb-slideshow,
.cb-slideshow:after{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:0;
}
.cb-slideshow li{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-size:cover;//背景图片铺满整个元素
background-position: center;
background-repeat: none;
opacity:0;
z-index:0;
-webkit-animation: loops 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;
}
.cb-slideshow li:nth-child(3){
background-image: url(./images/3.jpg);
-webkit-animation-delay: 12s;
}
.cb-slideshow li:nth-child(4){
background-image: url(./images/4.jpg);
-webkit-animation-delay: 18s;
}
.cb-slideshow li:nth-child(5){
background-image: url(./images/5.jpg);
-webkit-animation-delay: 24s;
}
.cb-slideshow li:nth-child(6){
background-image: url(./images/3.jpg);
-webkit-animation-delay: 30s;
}
@-webkit-keyframes "loops" {
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.5;
/*transform:translateY(10px);*/
}
100% {
opacity: 0;
/*transform:translateY(0);*/
}
}
</style>
</head>
<body>
<ul class="cb-slideshow">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>