css3動畫編寫圖片無縫滾動的效果
阿新 • • 發佈：2020-12-18
技術標籤：css3
css3動畫編寫圖片無縫滾動的效果
程式碼編寫如下
<!doctype html> <html> <head> <title>練習</title> <meta charset="utf-8" /> <style type="text/css"> /*無縫滾動*/ nav { padding-top:10px; margin:0 auto; width:600px; height:80px; border:1px solid pink; overflow:hidden; } nav ul { list-style: none; } nav ul li { float:left; } nav ul { width:200%; /*動畫名稱為moving 動畫時長5s 勻速運動 無限迴圈*/ animation:moving 5s linear infinite; } @keyframes moving { from { transform: translatex(0); } to { transform: translatex(-600px); } } nav:hover ul { /*滑鼠經過nav 裡面的ul 就不做動畫了*/ animation-play-state:paused;/*滑鼠放上去時，暫停動畫*/ } </style> </head> <body> <nav> <ul> <li><img src="img/car.jpg" style="width:100px" /></li> <li><img src="img/car2.jpg" style="width:100px" /></li> <li><img src="img/car3.jpg" style="width:100px" /></li> <li><img src="img/car4.jpg" style="width:100px" /></li> <li><img src="img/car5.jpg" style="width:100px" /></li> <li><img src="img/car6.jpg" style="width:100px" /></li> <li><img src="img/car.jpg" style="width:100px" /></li> <li><img src="img/car2.jpg" style="width:100px" /></li> <li><img src="img/car3.jpg" style="width:100px" /></li> <li><img src="img/car4.jpg" style="width:100px" /></li> <li><img src="img/car5.jpg" style="width:100px" /></li> <li><img src="img/car6.jpg" style="width:100px" /></li> </ul> </nav> </body> </html>