今天閑著沒事喳整，看到隔壁老張?jiān)谟胘q寫文字向上的輪播效果谆构，遂想到用css3的動(dòng)畫也可以做到，然后就隨手寫了點(diǎn)框都，向上的過渡距離不是很精確搬素，有需要的自行修改，歡迎提出意見魏保。
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>