<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无限轮播图</title> <style> *{ margin: 0; padding: 0; } div{ width: 600px; height: 188px; border: 1px solid #000; margin: 100px auto; overflow: hidden; } ul{ width: 2000px; height: 188px; background-color: black; animation: move 10s linear 0s infinite normal; } ul li{ float: left; list-style: none; width: 300px; height: 188px; background-color: red; border: 1px solid #000; box-sizing: border-box; } ul:hover{ /*动画添加给谁, 就让谁停止*/ animation-play-state: paused; } /* 半透明，为了显示蒙版 */ ul:hover li{ opacity: 0.5; } ul li:hover{ opacity: 1; } ul li img { width: 300px; height: 188px; } @keyframes move { from { margin-left: 0; } to { margin-left: -1200px; } } </style> </head> <body> <div> <ul> <li><img src="images/banner11.png" alt=""></li> <li><img src="images/banner11.png" alt=""></li> <li><img src="images/banner11.png" alt=""></li> <li><img src="images/banner11.png" alt=""></li> <!--这里添加两个，作为平滑的过渡--> <li><img src="images/banner11.png" alt=""></li> <li><img src="images/banner11.png" alt=""></li> </ul> </div> </body> </html>
