Question

我试图在六幅图像中循环播放横幅。我把它们全部堆叠在一起。我希望下面的人能够定期占据前面的位置。我的想法是为每个图像创建关键帧动画，其持续时间相同，使它们以不同的时间百分比出现。这并不是我预期的方式。我尝试了其他各种各样的东西，但没有任何效果。有人可以帮忙吗？

<div id="splash"><a href="#"><img src="bannerimages/Banner-A.jpg" width="877" height="170" alt=""/></a>

<style>
    @-webkit-keyframes bannermove1 {
    0% {
        opacity: 1;
    }
    20%, 100% {
        opacity: 0;
    }
}
@-webkit-keyframes bannermove2 {
    20% {
        opacity: 1;
    }
    0%, 40%, 100% {
        opacity: 0;
    }
}
</style>

<img src="bannerimages/e1.jpg" style="position: absolute; top: 145px; left: 217px; opacity: 0; -webkit-animation-name: bannermove1; 
-webkit-animation-duration: 30s; -webkit-animation-delay: 6s" width="877" height="170" alt=""/> 
<img src="bannerimages/Banner-C.jpg" style="position: absolute; top: 145px; left: 217px; opacity: 0; -webkit-animation-name: bannermove2; -webkit-animation-duration: 30s; -webkit-animation-delay: 6s;" width="877" height="170" alt=""/>
<img src="bannerimages/Banner-B.jpg" style="position: absolute; top: 145px; left: 217px; opacity: 0;" width="877" height="170" alt=""/> 
<img src="bannerimages/f1.jpg" style="position: absolute; top: 145px; left: 217px; opacity: 0;" width="877" height="170" alt=""/> 
<img src="bannerimages/Banner-D.jpg" style="position: absolute; top: 145px; left: 217px; opacity: 0;" width="877" height="170" alt=""/> 
</div>

CSS3关键帧动画循环横幅图像

0 个答案: