纯css3无缝向左滚动:
HTML:
<div class="marqueCon"> <div class="marque"> <img src="images/index1.jpg" alt=""> <img src="images/index2.jpg" alt=""> <img src="images/index3.jpg" alt=""> <img src="images/index4.jpg" alt=""> <img src="images/index5.jpg" alt="">
<img src="images/index1.jpg" alt=""> <img src="images/index2.jpg" alt=""> <img src="images/index3.jpg" alt=""> <img src="images/index4.jpg" alt=""> <img src="images/index5.jpg" alt=""> </div> </div>
//注意图片要有重合
CSS:
.marqueCon{ width:1100px; margin:0 auto; overflow:hidden; } .marque{ width:2200px; //宽度是marqueCon宽度的二倍 margin:0 auto; animation:leftM 15s linear infinite; } .marque:after{ content:""; display:block; clear:both; } .marque:hover{ animation-play-state:paused; } .marque img{ margin:5px; float:left; display:block; width:210px; } @keyframes leftM{ 0%{transform:translateX(0px);} 25%{transform:translateX(-200px);} 50%{transform:translateX(-500px);} 75%{transform:translateX(-800px);} 100%{transform:translateX(-1100px);} //滑动到最左边,即marque宽度的一半
}