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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM