用css动画写app文字轮播

使用动画实现轮播效果

在网上搜了一下,也观看了一些大佬的博客,但不是自己想要的效果,于是加以改进,最终达到了目的

下面是要实现的轮播内容,因为要实现无缝连接,至少肉眼看不出来,所以首尾应一致

// An highlighted block
<div>
	 <ul class="ul">
       <li>王者荣耀</li>
       <li>绝地求生</li>
       <li>国服传奇</li>
       <li>王者荣耀</li>
     </ul>
 </div>

css 样式,实现一个稍作停顿的效果

// An highlighted block
div,ul,li{
            padding: 0;
            margin: 0;
        }
        div{
            margin-top: 200px;
            width:350px;
            height: 50px;
            border: 1px solid;
            overflow: hidden;
			}
			.ul li{
				width: 300px;
				height: 50px;
			}
			.ul {
				height:200px;
                line-height: 50px;
				position:relative;
				/* transition: all 2s; */
				animation:dh 9s infinite ;
			}
			@keyframes dh {
                0% {
                    transform:translatey(0px);
                }
                10% {
                    transform:translatey(-50px);
                }
                33% {
                    transform:translatey(-50px);
                }
                42% {
                    transform:translateY(-100px);
                }
                67% {
                    transform:translateY(-100px);
                }
                76% {
                    transform:translateY(-150px);
                }
                100% {
                    transform:translateY(-150px);
                }
			}