请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。-CSDN博客

利用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>