您的位置：首页 > Web前端 > JavaScript

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

2015-01-05 16:14 811 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航