展示
代码
CSS代码：
@-moz-keyframes slide {
from, to { top: 0; }
12.5% { top: 0; }
25% { top: -375px; }
37.5% { top: -375px; }
50% { top: -750px; }
62.5% { top: -750px; }
75% { top: -1125px; }
87.5% { top: -1125px; }
}
@-webkit-keyframes slide {
from, to { top: 0; }
12.5% { top: 0; }
25% { top: -375px; }
37.5% { top: -375px; }
50% { top: -750px; }
62.5% { top: -750px; }
75% { top: -1125px; }
87.5% { top: -1125px; }
}
@-moz-keyframes index_1 {
from, 25%, to { background-color: rgba(0,0,0,.5); }
0% { background-color: rgba(255,0,0,.5); }
}
@-moz-keyframes index_2 {
from, 50%, to { background-color: rgba(0,0,0,.5); }
25% { background-color: rgba(255,0,0,.5); }
}
@-moz-keyframes index_3 {
from, 75%, to { background-color: rgba(0,0,0,.5); }
50% { background-color: rgba(255,0,0,.5); }
}
@-moz-keyframes index_4 {
from, 100%, to { background-color: rgba(0,0,0,.5); }
75% { background-color: rgba(255,0,0,.5); }
}
@-webkit-keyframes index_1 {
from, 25%, to { background-color: rgba(0,0,0,.5); }
0% { background-color: rgba(255,0,0,.5); }
}
@-webkit-keyframes index_2 {
from, 50%, to { background-color: rgba(0,0,0,.5); }
25% { background-color: rgba(255,0,0,.5); }
}
@-webkit-keyframes index_3 {
from, 75%, to { background-color: rgba(0,0,0,.5); }
50% { background-color: rgba(255,0,0,.5); }
}
@-webkit-keyframes index_4 {
from, 100%, to { background-color: rgba(0,0,0,.5); }
75% { background-color: rgba(255,0,0,.5); }
}
.box{width:500px; height:375px; margin:1em auto; position:relative; overflow:hidden;}
.list{margin:0; padding:0; position:absolute;}
.list{
-moz-animation: slide 20s infinite;
-webkit-animation: slide 20s infinite;
}
.slide{vertical-align:bottom;}
.index{position:absolute; right:1em; bottom:1em;}
.index a{display:inline-block; width:20px; height:20px; line-height:20px; margin-left:.5em; border-radius:10px; background-color:rgba(0,0,0,.5); text-align:center; text-decoration:none!important; color:#fff;}
.index_1{
-moz-animation: index_1 20s step-end infinite;
-webkit-animation: index_1 20s step-end infinite;
}
.index_2{
-moz-animation: index_2 20s step-end infinite;
-webkit-animation: index_2 20s step-end infinite;
}
.index_3{
-moz-animation: index_3 20s step-end infinite;
-webkit-animation: index_3 20s step-end infinite;
}
.index_4{
-moz-animation: index_4 20s step-end infinite;
-webkit-animation: index_4 20s step-end infinite;
}
HTML代码：
<div class="box">
<ul class="list">
<li><img class="slide" src="//image.zhangxinxu.com/image/study/p/s500/ps1.jpg" height="375" /></li>
<li><img class="slide" src="//image.zhangxinxu.com/image/study/p/s500/ps2.jpg" height="375" /></li>
<li><img class="slide" src="//image.zhangxinxu.com/image/study/p/s500/ps3.jpg" height="375" /></li>
<li><img class="slide" src="//image.zhangxinxu.com/image/study/p/s500/ps4.jpg" height="375" /></li>
</ul>
<div class="index">
<a href="javascript:" class="index_1">1</a>
<a href="javascript:" class="index_2">2</a>
<a href="javascript:" class="index_3">3</a>
<a href="javascript:" class="index_4">4</a>
</div>
</div>
