纯CSS实现上下广告文字滚动效果

admin

1. .wrap{height:30px;overflow: hidden;position: absolute;top:30;left: 100;width: 100%}
   
2.       p{margin:0;height: 30px;width: 100%}
   
3.       .content p{
   
4.         position: absolute;
   
5.       }
   
6.       @-webkit-keyframes anim1{
   
7.         0% {top: 30px;opacity: 1}
   
8.         50% {top: -30px;opacity: 1}
   
9.         75% {top: -30px ;opacity: 0}
   
10.         100%{top:30px;opacity: 0}
    
11.       }
    
12.       @-webkit-keyframes anim2{
    
13.      
    
14.         0% {top: -30px;opacity: 0}
    
15.         25% {top: 30px;opacity: 0}
    
16.         50% {top: 30px;opacity: 1}
    
17.         100%{top: -30px;opacity: 1}
    
18.       }
    
19. 
    
20.       .content p:nth-child(1){background-color: red;}
    
21.       .content p:nth-child(2){background-color: yellow;}
    
22.       .content p:nth-child(1){
    
23.         
    
24.         -webkit-animation: anim1 3s linear infinite;
    
25.       }
    
26.       
    
27.       .content p:nth-child(2){
    
28.    
    
29.         -webkit-animation: anim2 3s linear infinite;
    
30.       }

复制代码

1.   <div class="wrap">
   
2.     <div class="content">
   
3. <p>第一行数据</p>
   
4. <p>第二行数据</p>
   
5. 
   
6.     </div>
   
7.   </div>

复制代码