css实现背景图横向滚动 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style type="text/css">  
*{  
margin: 0;  
padding: 0;  
}  

#footgundong{  
width:1920px;  
height:60px;  
margin:100px auto;  
overflow: hidden;  
position: relative;  
}  

#footgundong ul{  
list-style: none;  
width: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;
width: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>

　　

posted @ 2019-12-28 17:23  绿林豪士  阅读(2118)  评论(0)    收藏  举报