CSS3 animate step属性下幻灯片播放效果实例页面

展示

回到相关文章 »
1 2 3 4

代码

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>