html div实现滚动效果,纯css3滚动效果

看到该实例标题的时候，表示心情十分激动然后再加上一点忑忑，因为以前看过类似的，但是都比较有缺憾，不那么完美。可是这个媲美从前所有的纯css3打造的滚动效果，可以堪称完美了(除了没有导航控制)。只因制作巧妙精美，所以我只表示欣赏而不好加以评论，感兴趣的话大家还是自己手动研究下为好。

因css3代码篇幅较长，这里只抽出一部分重要的以供参阅：

#slider li.firstanimation {

-moz-animation:cycle 25s linear infinite;

-webkit-animation:cycle 25s linear infinite;

}

#slider li.secondanimation {

-moz-animation:cycletwo 25s linear infinite;

-webkit-animation:cycletwo 25s linear infinite;

}

@-moz-keyframes cycle {

0% { top:0px; }

4% { top:0px; }

16% { top:0px; opacity:1; z-index:0; }

20% { top:325px; opacity:0; z-index:0; }

21% { top:-325px; opacity:0; z-index:-1; }

92% { top:-325px; opacity:0; z-index:0; }

96% { top:-325px; opacity:0; }

100%{ top:0px; opacity:1; }

}

&