今天闲着没事，看到隔壁老张在用jq写文字向上的轮播效果，遂想到用css3的动画也可以做到，然后就随手写了点，向上的过渡距离不是很精确，有需要的自行修改，欢迎提出意见。
css部分

<style>
            div{
                width:350px;
                height: 150px;
                border: 1px solid;
                overflow: hidden;
            }
            .ul li{
                width: 300px;
                height: 38px;
            }
            .ul {
                height:220px;
                position:relative;
                transition: all 2s;
                animation:aaa 15s infinite 2s running;
            }
            @keyframes aaa {
                0% {
                transform:translatey(0px);
            }
            15% {
                transform:translatey(-38px);
            }
            25% {
                transform:translateY(-72px);
            }
            50% {
                transform:translateY(-120px);
            }
            75% {
                transform:translateY(-220px);
            }
            100% {
                transform:translateY(-400px);
            }
            }
            .ul:hover {
                animation-play-state:paused;
                cursor:pointer;
            }
        </style>

HTML部分：

    <div>
            <ul class="ul">
                <li>11111111111111111111111111111</li>
                <li>22222222222222222222222222222</li>
                <li>33333333333333333333333333333</li>
                <li>44444444444444444444444444444</li>
                <li>555555555555555555555555555555</li>
                <li>666666666666666666666666666666</li>
                <li>11111111111111111111111111111</li>
                <li>22222222222222222222222222222</li>
                <li>33333333333333333333333333333</li>
                <li>44444444444444444444444444444</li>
                <li>555555555555555555555555555555</li>
                <li>666666666666666666666666666666</li>
                <li>11111111111111111111111111111</li>
                <li>22222222222222222222222222222</li>
                <li>33333333333333333333333333333</li>
                <li>44444444444444444444444444444</li>
                <li>555555555555555555555555555555</li>
                <li>666666666666666666666666666666</li>
                <li>11111111111111111111111111111</li>
                <li>22222222222222222222222222222</li>
                <li>33333333333333333333333333333</li>
                <li>44444444444444444444444444444</li>
                <li>555555555555555555555555555555</li>
                <li>666666666666666666666666666666</li>
            </ul>
        </div>