ul { margin: 0; padding: 0; list-style: none; } .my-swiper { position: relative; width: 800px; height: 450px; margin: 100px auto; overflow: hidden; background-color: cornflowerblue; } .swiper-list { position: absolute; top: 0; left: 0; width: 4000px; height: 100%; overflow: hidden; animation: swiper 10s steps(1, end) infinite; transition: left 1s linear; } .swiper-slide { width: 800px; height: 100%; float: left; overflow: hidden; } .swiper-slide a { display: block; height: 100%; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 分页 */ .pagination { position: absolute; bottom: 0; left: 0; right: 0; line-height: 45px; background: rgba(255, 255, 255, 0.3); text-align: center; } .dot { display: inline-block; width: 10px; height: 10px; margin: 0 2px; background: #fff; border-radius: 50%; } /* 橙色小圆点 */ .dot.active { position: absolute; left: 356px; top: 18px; width: 11px; height: 11px; margin: 0; background: tomato; animation: swiper-dot 10s steps(1, end) infinite; transition: left 1s linear; } @keyframes swiper { 0%, 100% { left: 0; } 20% { left: -800px; } 40% { left: -1600px; } 60% { left: -2400px; } 80% { left: -3200px; } /* 100% { left: -3200px; } */ } @keyframes swiper-dot { 0%, 100% { left: 358px; } 20% { left: 376px; } 40% { left: 395px; } 60% { left: 413px; } 80% { left: 432px; } } /* [[Category:在模板名字空间下的CSS页面]] */