zoukankan      html  css  js  c++  java
  • css实现背景图横向滚动

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body>
    <style type="text/css">  
    *{  
    margin: 0;  
    padding: 0;  
    }  
    
    #footgundong{  
    1920px;  
    height:60px;  
    margin:100px auto;  
    overflow: hidden;  
    position: relative;  
    }  
    
    #footgundong ul{  
    list-style: none;  
    10000000px;  
    left:0;  
    top:0;  
    position: absolute;   
    }
    
    #footgundong .ul1 {-webkit-animation:scoll 7s linear 0s infinite; }
    #footgundong .ul2 {-webkit-animation:scoll 10s linear 0s infinite; }
    
    #footgundong ul li{  
    float:left; 
    height: 60px;
    1920px;
    } 
    
    .lang1 {background: url(https://dl.zhutix.net/2019/08/wave_02.png) repeat-x;}
    .lang2 {background: url(https://dl.zhutix.net/2019/08/wave_01.png) repeat-x;}
    
    @-webkit-keyframes scoll{  
    from{  
    	left:0;  
    }  
    to{  
    	left:-1920px;  
    }  
    }
    
    </style>  
    
    
    <div id="footgundong">  
    <ul class="ul1">  
    <li class="lang1"></li>
    <li class="lang1"></li>
    </ul> 
    
    <ul class="ul2">  
    <li class="lang2"></li>
    <li class="lang2"></li>
    </ul>  
    </div> 
    </body>
    </html>
    

      

  • 相关阅读:
    hlg1541集合划分【01背包】
    HLG1067QQ Farm【状压dp】
    作业。。
    HDU3602 2012【dp】
    hdu 1233(最小生成树 prim算法)
    hdu 2988(最小生成树 kruskal算法)
    hdu 1272
    hdu 1213(并查集模版题)
    hdu 2846(字典树)
    hdu 1075(字典树)
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/12112409.html
Copyright © 2011-2022 走看看