標籤：float one line alt text img body auto jpg
首先效果如下。
效果就是若干長圖通過視口，並且第一張和最後一張要無縫銜接。
接著原理圖如下。真的，超簡單。。。
注意：第一張和最後一張必須要是同一張圖，這樣才能無縫銜接。
如果視口大於每張圖片，那就有必要第1，2甚至3張和倒數第3，2，1張相同，這樣才能在視口大於圖片的情況下完成完成銜接。
從右往左滾動，或者垂直方向滾動效果稍加變動代碼即可實現。
代碼如下
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>CSS圖片無縫迴圈</title> <style> *{ padding: 0; margin: 0; } .box{ width: 229px; height: 149px; margin: 0px auto; border: 2px solid #000; overflow: hidden; } .box ul{ margin-top: 10px; width: 1145px; height: 129px; animation: move linear 5s infinite; } .box li { width: 229px; height: 129px; float: right; list-style: none; } @keyframes move { 0%{ transform: translateX(-916px);// } 100%{ transform: translateX(0px); } } </style></head><body><div class="box"> <ul> <li><img src="marvel_fans/img/dm_pic01.jpg" /></li> <li><img src="marvel_fans/img/dm_pic02.jpg" /></li> <li><img src="marvel_fans/img/dm_pic03.jpg" /></li> <li><img src="marvel_fans/img/dm_pic04.jpg" /></li> <li><img src="marvel_fans/img/dm_pic01.jpg" /></li> </ul></div></body></html>
剛接觸前端不久小白一枚，若有問題請指出不甚感激。
超簡單的純CSS圖片無縫迴圈方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
