CSS 实战css垂直轮播

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            #box{
                width: 202px;height: 32px;line-height: 30px;
                margin: 100px auto;border: 1px solid #222222;
                position: relative;
                overflow: hidden;
            }
            #box ul{
                width: 100%;height: 500%;
                position: absolute;top: 0;left: 0;
                animation: czlb 4s linear infinite;
            }
            #box ul li{
                width: 100%;height: 20%;padding-left: 10px;
            }
            @keyframes czlb{
                0%{top: 0;}
                10%{top: -100%;}
                25%{top: -100%;}
                35%{top: -200%;}
                50%{top: -200%;}
                60%{top: -300%;}
                75%{top: -300%;}
                85%{top: -400%;}
                100%{top: -400%;}
            }
        </style>
    </head>
    <body>
        <div id="box">
            <!-- ul>li{我是第$条公告......}*4 -->
            <ul>
                <li>我是第1条公告......</li>
                <li>我是第2条公告......</li>
                <li>我是第3条公告......</li>
                <li>我是第4条公告......</li>
                <li>我是第1条公告......</li>
            </ul>
        </div>
    </body>
</html>