CSS3代码图片轮播停顿是在图片轮播中,我们可以设置让图片在指定时间内停留,以方便用户观看图片时更加舒适。下面是使用CSS3代码实现图片轮播停顿的方法。
.slider { display: flex; align-items: center; justify-content: center; max-width: 100%; overflow: hidden; position: relative; } .slider .slide-item { position: absolute; opacity: 0; transition: opacity .5s ease-in-out; } .slider .slide-item.active { position: relative; opacity: 1; } .slider .slider-dots { display: flex; justify-content: center; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } .slider .slider-dots .dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; background: #fff; transition: background .3s ease-in-out; cursor: pointer; } .slider .slider-dots .dot.active { background: #ff0000; } .slider:hover .slide-item.paused { transition-delay: 5s; }
上面的CSS3代码中,我们通过为鼠标悬停在轮播图上时,将停留时间设置为5秒的方法实现了停顿效果。现在我们只需要在HTML中调用这些样式,即可实现简单的图片轮播效果。