纯Css文字轮播轮播

 不用一行js也能解决上下游动效果  可以试试  代码很简单
 
                
               <style>
                .div1 {
            	width:200px;
            	height:200px;
            	overflow:hidden;
            	margin:auto;
            	position:relative;
            }
            @keyframes anis {
            	100% {
            	transform:translateY(-200px)
            }
            }img {
            	position:absolute;
            } 
            img {
                animation:anis 10s linear infinite; 
            }
            .div2 {
            	animation:anis 10s linear infinite;
            }
            .div2:hover {
            	animation-play-state:paused;
            }
            
         
            </style>
            
            
            
            
           <div class="div1">
            <div class="div2">
             <p>你来了</p>
             <p>你来了</p>
             <p>你来了</p>
             <p>你来了</p>
             <p>你来了</p>
             <p>你来了</p>
             <p>你来了</p>
             <p>你来了</p>
             <p>你来了</p>
            </div>
        </div>
            
            希望能帮到你们！！！ 
复制代码

转载于:https://juejin.im/post/5bf91d786fb9a049c042b009